SVG 튜토리얼

SVG 元素

SVG CSS 스타일

我们可以使用CSS设置SVG形状的样式。样式是指改变形状的外观。这可以是笔触颜色和宽度，填充颜色，不透明度和形状的许多其他属性。

有6种样式可以设置SVG图像中的形状。每个都将在本文中介绍。在本文的结尾，您将找到可以与SVG一起使用的CSS属性的列表。

使用CSS样式属性

是否可以使用特定的样式属性（例如stroke和fill）来样式化SVG形状。这是一个示例：

예제

<svg xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<circle　cx="40"　cy="40"　r="24"　stroke="#000000"　fill="#00ff00"　/>
</svg>

테스트를 해보세요‹/›

虽然有一系列可用的样式属性。但是，建议您使用内联样式表或外部样式表，因此在这里我不会过多介绍样式属性。

使用style属性和CSS属性

此方法不使用任何特定于样式的属性。相反，它仅使用　style属性并在其中指定CSS属性。如果您需要直接在样式中嵌入样式，则此方法优于特定属性，因为您可以学习CSS属性的名称。内部或外部样式表中的CSS属性都是相同的，因此复制粘贴和学习此类内容更加容易。

这是一个通过style　属性和CSS属性设置描边和填充的圆圈：

예제

<svg xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="40"　cy="40"　r="24"　style="stroke:　#000000;　fill:#00ff00;"　/></svg>

테스트를 해보세요‹/›

使用内联样式表

您可以在嵌入式样式表中定义形状的样式，然后将所有这些样式自动应用到形状。这是一个示例：

예제

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<style type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle　{
　　　　　　　　　　　stroke:　#006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　]]>
　　　　</style>
　　　　
　　　　<circle　　cx="40"　cy="40"　r="24"/>
</svg>

테스트를 해보세요‹/›

请注意在<style>元素内部如何定义circle元素的样式。这与HTML和CSS中的工作方式相同。

내부 스타일 시트는 Internet Explorer에서도 사용할 수 있습니다. 7와 Firefox 3.0.5에서는 모두 정상적으로 작동합니다.

효과는 다음과 같습니다:

class 클래스 속성

class 속성을 사용하여 특정 형상의 스타일을 선택할 수 있습니다. 모든 형상에 대한 스타일을 적용하는 대신에(예: 모든 원형). 이와 같이 class는 HTML 요소에서 속성으로 사용됩니다.

이 두 개의 원 스타일의 예제입니다-녹색과 빨간색을 사용합니다.<circle>는 다음과 같은 class 속성을 사용하여 각각의 요소에 이 두 가지 스타일 중 하나를 적용할 수 있습니다:

예제

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<style type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle.myGreen　{
　　　　　　　　　　　stroke:　#006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　　circle.myRed　{
　　　　　　　stroke:　#660000;
　　　　　　　fill:　　　#cc0000;
　　　　}
　　　　　　]]>
　　　　</style>
　　　　<circle　　class="myGreen"　cx="40"　cy="40"　　r="24"/>
　　　　<circle　　class="myRed"　　　cx="40"　cy="100"　r="24"/>
</svg>

테스트를 해보세요‹/›

circle의 경우를 참조하세요. 스타일 시트의 선택자 이름이 .myGreen과 .myRed 접미사를 가지고 있는지 주의하세요. 이제, <circle> 요소는 class="myGreen"으로 초록색을 정의하거나 class="myRed"으로 빨간 원의 스타일을 정의할 수 있습니다.

외부 스타일 시트를 사용합니다

외부 스타일 시트를 사용할 때, 스타일 시트는 별도의 파일에 배치되어 웹 서버에 배치됩니다. 또한, <svg> 요소 전에, SVG 파일에 다음과 같은 선언을 포함해야 합니다:

예제

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?

이 처리指令은 SVG 뷰어가 파일 "svg"를 사용하여 CSS 스타일 시트를 찾도록 지시합니다.-stylesheet.css”。

SVG 파일에서 사용하는 데claration을 사용하는 예제입니다:

예제

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?
<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="40"　cy="40"　r="24"
　　　　　　　style="stroke:#006600; fill:#00cc00"/>
</svg>

주의: 외부 CSS 스타일 시트는 Internet Explorer 7에서는 정상적으로 작동하지만 Firefox 3.0.5중에서는 사용할 수 없습니다.

HTML 페이지에서 스타일 시트를 사용합니다.

SVG 이미지를 HTML 페이지에 삽입하면 SVG 이미지의 스타일 시트도 HTML 페이지에 삽입할 수 있습니다. 예제를 보세요:

예제

<html>
<body>
<style>
</style>
<svg>
</svg>
</body>
</html>

테스트를 해보세요‹/›

SVG 이미지 내의 도형에 스타일을 추가하려면, style 요소 내에 일반 CSS 속성을 추가하면 됩니다. SVG 요소의 스타일을 설정할 수 있는 CSS 선택자를 사용할 수 있습니다. 이는 HTML 페이지에서 circle 요소를 CSS 스타일 시트를 통해 스타일을 설정하는 예제입니다:

예제

<html>
<body>
<style>
　　circle　{
　　　　　stroke:　#006600;
　　　　　fill　　:　#00cc00;
　　}
</style>
<svg>
　　<circle　cx="40"　cy="40"　r="24"　/>
</svg>
</body>
</html>

테스트를 해보세요‹/›

SVG 이미지를 직접 HTML 페이지에 내嵌하면, 이는 SVG 도형 스타일을 설정하는 가장 간단한 방법 중 하나일 수 있습니다.

도형 내에서 스타일 시트 덮기

스타일 시트에 이미 스타일이 설정되어 있다면, 새로운 스타일을 설정하려는 도형 내에서 새로운 스타일 속성을 로컬로 설정하여 이 스타일을 덮을 수 있습니다. 도형 내에서 로컬로 설정된 스타일은 내부나 외부 스타일 시트에서 정의된 스타일보다 항상 우선합니다.

SVG CSS 속성

SVG 요소는 다음과 같은 설정할 수 있는 CSS 속성을 가집니다. 모든 요소가 모든 이러한 CSS 속성을 가지고 있지 않습니다. 따라서 CSS 속성은 다양한 요소에 대한 여러 표로 나뉩니다.

도형 CSS 속성

path 요소와 다른 도형 요소의 CSS 속성:

CSS 속성	설명
fill	도형의 채우기 색상을 설정합니다.
fill-불투명도	도형의 채우기 불투명도를 설정합니다.
fill-rule	도형의 채우기 규칙을 설정합니다.
marker	이 도형의 선(辺)에 사용되는 표시를 설정합니다.
marker-start	이 도형의 선(辺)에 사용되는 시작 표시를 설정합니다.
marker-mid	이 도형의 선(辺)에 사용되는 중간 표시를 설정합니다.
marker-end	이 도형의 선(辺)에 사용되는 종료 표시를 설정합니다.
stroke	이 도형의 경계선을 그리는 선(라인) 색상을 설정합니다.
stroke-dasharray	이 도형의 경계선을 그리는 선(반복선)을 설정합니다.
stroke-dashoffset	이 도형의 경계선을 그리는 선(직선) 반복선(다이아스) 오프셋을 설정합니다.
stroke-linecap	이 도형의 경계선을 그리는 선(선) 머리를 설정합니다. 유효한 값은 round, butt, square입니다.
stroke-miterlimit	이 도형의 경계선을 그리는 선(직선) 점접 제한을 설정합니다.
stroke-불투명도	이 도형의 경계선을 그리는 선(직선) 불투명도를 설정합니다.
stroke-width	이 도형의 경계선을 그리는 선(라인) 너비를 설정합니다.
text-rendering	이 도형의 경계선을 그리는 텍스트 렌더링을 설정합니다.

텍스트 CSS 속성

text 요소의 CSS 속성:

CSS 속성	설명
대비-기본선	텍스트와의 대비 방식 x 및 y 좌표를 설정합니다.
기본선-기울기	텍스트를 표현하는 데 사용할 기본선 기울기를 설정합니다.
dominant-기본선	주요 기본선을 설정합니다.
글리프-방향-수평	수평 글리프 방향을 설정합니다.
글리프-방향-수직	수직 글리프 방향을 설정합니다.
간격	문자 간격(문자 간격은 글자 간격입니다)을 설정합니다.

그레이더 CSS 속성

SVG 그레이더의 CSS 속성:

CSS 속성	설명
스톱-색상	스톱 요소에서 사용할 종료 색상을 설정합니다.
스톱-불투명도	스톱을 설정하여 그레이더에서 사용할 요소에서 사용할 불투명도를 설정합니다.

SVG stroke 속성 SVG <use> 요소