svg 란 무엇입니까? 일반적으로 사용되는 svg 메서드(코드 포함)-H5 튜토리얼-php.cn

이 기사에서는 SVG가 무엇인지 설명합니다. 일반적으로 사용되는 svg(코드 포함) 방법에는 특정 참조 값이 있으므로 도움이 필요한 친구가 참조할 수 있기를 바랍니다.

SVG란 무엇인가요?
SVG는 Scalable Vector Graphics의 약어입니다.
SVG는 웹용 벡터 기반 그래픽을 정의하는 데 사용됩니다.
SVG는 XML 형식을 사용하여 그래픽을 정의합니다.
SVG 이미지의 그래픽 품질은 확대되거나 크기가 조정되더라도 변경되지 않습니다.
SVG는 World Wide Web Consortium의 표준
SVG는 DOM 및 XSL과 같은 W3C 표준과 통합됩니다.

다른 이미지 형식과 비교할 때 SVG 사용의 장점은 다음과 같습니다.
SVG는 메모장과 같은 다양한 도구로 읽고 수정할 수 있습니다.
JPEG 및 GIF 이미지와 비교하여 SVG는 크기가 더 작고 압축 가능성이 더 높습니다.
SVG는 확장 가능
SVG 이미지는 모든 해상도에서 고품질로 인쇄 가능
SVG는 이미지 품질 저하 없이 확대 가능
SVG 이미지의 텍스트는 선택 사항이며 검색 가능합니다(지도 제작에 적합)
SVG는 Java 기술로 실행 가능
SVG는 개방형 표준

SVG 파일은 순수 XML입니다.

코드 구조

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
 
<p>This is an HTML paragraph</p>
 
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
 
</body>
</html>

로그인 후 복사

SVG에서 제공하는 사전 정의된 모양 요소의 사용 및 조작:

태그를 사용하여 직사각형 및 직사각형의 변형을 만들 수 있습니다.

<rect x="20" y="20" rx="20" ry="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>

로그인 후 복사

코드 설명:
1) 직사각형 요소의 너비 및 높이 속성은 직사각형의 높이와 너비를 정의할 수 있습니다.

2) 스타일 속성은 CSS 속성을 정의하는 데 사용됩니다.

3) CSS의 채우기 속성은 직사각형의 채우기 색상(rgb 값, 색상 이름 또는 16진수 값)
4) CSS의 획 너비 속성은 직사각형 테두리의 너비를 정의합니다.
5) CSS의 획 속성 정의 직사각형 테두리의 색상
6 ) x 속성은 직사각형의 왼쪽 위치를 정의합니다(예: x="0"은 직사각형에서 브라우저 창 왼쪽까지의 거리를 0px로 정의합니다.)
7) y 속성은 사각형의 상단 위치를 정의합니다. 직사각형(예를 들어 y="0"은 직사각형에서 브라우저 창 상단까지의 거리가 0px임을 정의합니다.)
8) CSS의 fill-opacity 속성은 채우기 색상 투명도를 정의합니다(적용 범위: 0 - 1)
9) CSS의 획 불투명도 속성은 획 색상 투명도를 정의합니다(적용 범위: 0 - 1)
10) rx 및 ry 속성은 사각형의 모서리가 둥글게 만들 수 있습니다.

태그를 사용하여 원

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

로그인 후 복사

코드 설명:
1) cx 및 cy 속성은 원 점의 x 및 y 좌표를 정의합니다. cx와 cy가 생략되면 원의 중심은 (0, 0)

2)r로 설정됩니다. r 속성은 원의 반경을 정의합니다.

태그를 사용하여 타원을 만들 수 있습니다

<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>

로그인 후 복사

코드 설명:
1)cx 속성은 점의 x 좌표를 정의합니다.

2)cy 속성은 점의 y 좌표를 정의합니다. point

3)rx 속성은 수평 반경을 정의합니다
4)ry 속성은 수직 반경을 정의합니다

선을 만드는 데 사용됩니다

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

로그인 후 복사

코드 설명:
1)x1 속성은 x축의 선

2) y1 속성은 y축의 선의 시작을 정의합니다. 3) x2 속성은 x축의 선의 끝을 정의합니다. 4) y2 속성은 끝을 정의합니다. 측면이 있는 그래픽

<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

로그인 후 복사

코드 설명:

1) 점 속성은 다각형

직선만 포함하는 모양을 만드는 데 사용됩니다

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"  style="fill:white;stroke:red;stroke-width:2"/>

로그인 후 복사

코드 설명:

1) points 속성은 각 선분의 각 모서리의 x 및 y 좌표를 정의합니다.

아래 경로

<path d="M250 150 L150 350 L350 350 Z" />

로그인 후 복사

을 정의하려면 경로 데이터에 사용할 수 있는 명령은 다음과 같습니다.

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

로그인 후 복사

참고: 위의 모든 명령에는 소문자를 사용할 수 있습니다. 대문자는 절대 위치를 의미하고, 소문자는 상대 위치를 의미합니다.

SVG 필터 사용 가능한 필터는 다음과 같습니다:

feBlend

feColorMatrix

feComponentTransfer
feComposite

feConvolveMatrix

feDiffuseLightingfeDisplacementMapfeFlood

feGa Blur

feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

가우스 흐림Gaussian Blur

标签用来定义 SVG 滤镜。标签使用必需的 id 属性来定义向图形应用哪个滤镜？
标签必须嵌套在标签内。标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>

로그인 후 복사

代码解释：
1) 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
2)filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
3)滤镜效果是通过标签进行定义的。fe 后缀可用于所有的滤镜
4) 标签的 stdDeviation 属性可定义模糊的程度
5)in="SourceGraphic" 这个部分定义了由整个图像创建效果

可用来定义 SVG 的线性渐变

标签必须嵌套在的内部。标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变：
1)当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
2)当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
3)当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"  style="fill:url(#orange_red)"/>

로그인 후 복사

代码解释：
1) 标签的 id 属性可为渐变定义一个唯一的名称
2)fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
3) 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
4)渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset 属性用来定义渐变的开始和结束位置。

用来定义放射性渐变

标签必须嵌套在中。标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>

로그인 후 복사

代码解释：
1) 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset 属性用来定义渐变的开始和结束位置。

在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色，可以进行坐标变

<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <g fill="dodgerblue">
    <rect x="10" y="10" width="40" height="40" ry="10" />
    <rect x="80" y="80" width="40" height="40" ry="10" />
    <rect x="150" y="150" width="40" height="40" ry="10" />
  </g>

</svg>

로그인 후 복사