English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

SVG 가이드

SVG 요소

SVG stroke 속성

stroke 속성은 주어진 그래픽 요소의 외곽선 색상을 정의합니다. 기본 값은 none입니다.

　일반적으로 사용되는 속성은 다음과 같습니다:

  1. stroke-width

  2. stroke-linecap

  3. stroke-linejoin

  4. stroke-miterlimit

  5. stroke-주의하세요, 각도가 크면, 절삭된 부분이 큽니다. 이는 날카로운 각도가 자연스럽게 더 긴 절삭을 생성하기 때문입니다. + stroke-dasharray

  6. stroke-opacity

스타일 속성

CSS 스타일 속성 stroke와 fill은 SVG 형태의 내부 속성을 지정합니다. 이는 예제입니다:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<circle　cx="50"　cy="50"　r="50"　style="stroke:　#000066;　fill:　3333ff;"　/>
</svg>
테스트를 보세요‹/›

이 예제는 깊은 푸른색 선 캡 색상과 약간의 푸른색 채우기를 가진 원을 정의합니다.

선 예제

SVG 형태의 선은 형태의 외곽선입니다. 이는 SVG 선 예제입니다:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>
테스트를 보세요‹/›

이 예제는 검은색(#000000) 선 캡 색상이며 채우기가 없는 원을 정의합니다. 실행 후 이미지 효과:

선 캡과 채우기(Stroke & Fill) 예제

SVG 선과 채우기 색상을 SVG 형태로 조합할 수 있습니다. 이는 SVG 선과 채우기 예제입니다:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　#3333ff;"　/></svg>
테스트를 보세요‹/›

이 예제는 깊은 푸른색(#000066）선 캡 색상과 약간의 푸른색(#3333ff)를 가진 채우기颜色的 원. 실행 후 이미지 효과:

stroke-width

SVG는 stroke-width은 선의 너비를 정의하는 CSS 속성입니다. 이는 SVG　stroke-width 예제:

stroke-width:　3px;

이 예제에서는 선의 너비를 설정합니다3픽셀. 다른 단위를 사용할 수 있습니다. 다음에서:SVG 좌표 시스템 단위에서 모든 사용 가능한 단위를 확인할 수 있습니다입니다.

이는 네 가지 다른 예제 stroke-width：

<svg　width="500"　height="120">
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　1px;"　/>
<circle　cx="150"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　3px;"　/>
<circle　cx="250"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　6px;"　/>
<circle　cx="350"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　12px;"　/>
</svg>
테스트를 보세요‹/›

실행 후 이미지 효과:

선 캡(stroke-linecap)

dashoffset-linecap은 SVG 선의 끝이 어떻게 표현되는지 정의합니다. CSS 속성 stroke-linecap은 세 가지 가능한 값이 있습니다. 이들은 다음과 같습니다:

butt
square
round

이 값은 butt가 선의 끝을 정확히 자르는 선盖을 생성합니다. 이 값은 square이 선盖이 butt(자르기)처럼 보이지만, 선의 끝보다 약간 벗어나게 합니다. 이 값은 round이 선의 상단을 만듭니다.

이곳에는 세 개의 SVG　stroke-linecap은 이 세 가지 예제를 보여줍니다　stroke-linecap의 값(시퀀스=butt, square, round):

本示例定义了三个绿线，其中a　stroke-width为10，以更好地说明stroke-linecapCSS属性的效果。内的每个绿线绘制黑线用stroke-width　的1这条线具有相同x1, y1和x2, y2坐标为绿线，但没有　stroke-linecap一套。这样，您可以看到不同stroke-linecap　值之间的差异。

笔画线连接(stroke-linejoin)

이 CSS 속성 stroke-linejoin은 하나의 형상의 두 가지 선 간의 연결이 어떻게 렌더링되는지 정의합니다. CSS 속성 stroke-linejoin이 세 가지 중 하나를 취할 수 있습니다. 이 값은 다음과 같습니다:

miter
round
bevel

이는 세 개의 SVG stroke-linejoin 예제, 이들은 이러한 다른 값을 설명합니다:

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　miter;"　></path>
<text　x="22"　y="20">miter</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　round;"　></path>
<text　x="122"　y="20">round</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　bevel;"　></path>
<text　x="222"　y="20">bevel</text>
</svg>
테스트를 보세요‹/›

miterroundbevel

stroke-miterlimit

style 스타일 속 stroke-miterlimit 속성과 stroke-linejoin을 함께 사용합니다. stroke-linejoin이 점화로 설정되면 stroke-miterlimit는 두 가지 선이 교차하는 점(선 각(각도) 확장) 간의 거리를 제한할 수 있습니다.

이것은 SVG stroke입니다-miterlimit 예제:

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-miterlimit:　1.0;
　　　　　　　　　　　　　"　></path>
<text　x="29"　y="20">1.0</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-miterlimit:　2.0;
　　　　　　　　　　　　　"　></path>
<text　x="129"　y="20">2.0</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-miterlimit:　4.0;
　　　　　　　　　　　　　"　></path>
<text　x="229"　y="20">4.0</text>
</svg>
테스트를 보세요‹/›

请注意stroke-miterlimit를 사용하여 세 가지 다른 값으로 세 가지 다른 경로를 사용하면 거의 같게 보일 수 있습니다. 실행 후 이미지 효과:

1.02.04.0

선 연결의 길이는 점화 길이라고 합니다. 점화 길이는 연결선의 내각에서 연결선의尖端까지 측정됩니다. 이 이미지에서 점화 길이는 연결선의 위에 빨간색으로 그려져 있으며, 연결선의 오른쪽에서 다시 반복됩니다:

행진이 넓을수록, 연결선 간의 각도가 클수록, 점화 시간이 길어집니다.

stroke-miterlimit는 실제로 점화 길이와 선 두께 간의 비율의 상한을 설정합니다. 따라서, stroke-miterlimit为1miterlimit로1 .0은 절삭 길이가 최대1x pen划 너비. 절삭이 이 범위를 벗어납니다.-.0은 stroke

miterlimit의 최소 가능 값입니다.1다음은-.0as stroke

miterlimit 값의 예제, 그러나 연결선의 각도가 다릅니다:

stroke-주의하세요, 각도가 크면, 절삭된 부분이 큽니다. 이는 날카로운 각도가 자연스럽게 더 긴 절삭을 생성하기 때문입니다. + stroke-dasharray

dashoffset-SVG CSS 속성 stroke

이것은 SVG stroke입니다-dasharray는 SVG 형상의 pen划를 점선으로 렌더링하는 데 사용됩니다. "점선 배열"이라고 불리는 이유는 숫자 배열을 값을 제공한다는 것입니다. 이 값은 점선과 공백의 길이를 정의합니다. 따라서 짝수 개의 숫자를 제공해야 합니다.

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6dasharray 예제:-dasharray:　10　5"　　/>
</svg>
테스트를 보세요‹/›

px;　　　　　　stroke10픽셀, 점선 간격이5픽셀. 실행 후 이미지 효과:

다음은 다른 띄어쓰기와 간격을 가진 몇 가지 예제입니다:

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　5"　　></line>
<line　x1="20"　y1="40"　x2="120"　y2="40"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　10"　　></line>
</svg>
테스트를 보세요‹/›

첫 번째 줄로10의 점선 너비로 시작하여5픽셀 간격이 있고, 그 다음5픽셀의 점선, 그 다음5픽셀의 다른 간격으로 반복됩니다.

두 번째 줄이 점선 너비10부터 시작하여5픽셀 간격이 있고, 그 다음5픽셀의 점선, 마지막으로10픽셀 간격입니다.

실행 후 이미지 효과:

stroke-dashoffset은 점선 모드가 얼마나 멀리서 시작되는지 설정합니다. 이렇게 하면 중간에서 선을 그리거나, 예를 들어 패턴 중간에서 시작하여 그 다음부터 패턴을 반복할 수 있습니다. 이것은 SVG stroke-dashoffset 예제:

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="170"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5;　　　　　　stroke-dashoffset:　5;
　　　　　　"　　/>
</svg>
테스트를 보세요‹/›

이 예제에서 dash를 설정합니다-offset으로 설정됩니다5픽셀, 이는 점선 렌더링이5픽셀에서 점진적으로 렌더링됩니다(모든 브라우저가 이 기능을 완벽히 지원하지는 않습니다). 실행 후 이미지 효과:

stroke-opacity

SVG CSS 속성 stroke-opacity는 SVG 형상 외곽선 불투명도를 정의하는 데 사용됩니다. stroke-opacity는 0과1의 십진수가 0에 가까울수록 투명도가 높아집니다. 이 값이1이면 pen划越不透明합니다. 기본 stroke-opacity 값이1笔划完全不透明을 의미합니다

이것은 SVG stroke입니다-opacity 예제, 세 줄이 다른 stroke를 가지고 있는 것을 보여줍니다-opacity 텍스트 상단의 행　：

<svg　width="500"　height="120">
　　　　<text　x="22"　y="40">Text　Behind　Shape</text>
　　　　<path　d="M20,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.3;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M80,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.7;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M140,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　1;
　　　　　　　　　　　　　　　　　"　></path>
</svg>
테스트를 보세요‹/›

이렇게 생성된 이미지입니다. 뒤에 있는 텍스트는 점점 더 보이지 않습니다.

형상 뒤의 텍스트
SVG fill 속성SVG CSS 스타일