HTML5가 SVG를 사용하는 방법(코드 예)

이 글의 내용은 HTML5에서 SVG(코드 예제)를 사용하는 방법에 대한 내용입니다. 필요한 친구들이 참고하면 좋을 것 같습니다. 당신에게.

코드 최적화는 항상 프로그래머의 끊임없이 변화하는 요구 사항이며 일부 PNG/JPG 및 기타 형식 이미지를 대체하기 위해 SVG 이미지를 합리적으로 사용하는 것은 프런트 엔드 최적화의 중요한 부분입니다. . 최적화이므로 먼저 SVG 이미지의 장점을 살펴보겠습니다.

• SVG는 다양한 도구(예: 참고 사항)

• SVG는 JPEG 및 GIF 이미지보다 크기가 작고 압축률이 높습니다.

• SVG는 확장 가능합니다.

• SVG 이미지는 고품질 인쇄로 어떤 해상도에서도 생성 가능합니다 #🎜🎜 #

• SVG는 이미지 품질 저하 없이 확대 가능

• SVG 이미지 내의 텍스트는 선택 사항이며 검색 가능합니다(이상적인 지도 만들기) #

  SVG는 개방형 표준입니다

• SVG 파일은 순수 XML입니다

• SVG 이미지의 몇 가지 작은 예:

세 번째 공유 아이콘의 코드를 살펴보겠습니다. #🎜 🎜#

<svg>
  <g>
    <path></path>
    <path></path>
  </g>
</svg>

SVG를 모르는 학생들은 이제 처음 만났을 때처럼 물음표가 떠있을 거에요. 걱정하지 말고 기초부터 시작해보세요.

SVG란 무엇인가요? SVG는 XML 구문을 기반으로 하는 이미지 형식이며 전체 이름은 Scalable Vector Graphics입니다. 다른 이미지 형식은 픽셀 처리를 기반으로 하는 반면, SVG는 이미지의 모양을 설명하는 것이므로 기본적으로 크기가 작은 텍스트 파일이고 몇 번 확대해도 왜곡되지 않습니다. 또한 SVG는 World Wide Web Consortium 표준이며 SVG는 DOM 및 XSL과 같은 W3C 표준과 통합되어 있습니다.

사용방법은?

HTML5에서는 위의 작은 빨간색 하트와 같은 SVG 요소를 HTML 페이지에 직접 포함할 수 있습니다.

  <svg>
    <defs>
      <rect></rect>
      <mask>
        <use></use>
    </mask>
    </defs>
    <g>
      <use></use>
      <path></path>
    </g>
  </svg>

SVG 코드는 In에서도 작성할 수 있습니다. .svg로 끝나는 파일을 선택한 다음 과 같은 태그를 사용하여 웹 페이지에 삽입합니다.

<img  src="/static/imghwm/default1.png" data-src="search.svg" class="lazy" alt="HTML5가 SVG를 사용하는 방법(코드 예)" >
<object></object>
<embed>
<iframe></iframe></embed>

CSS는 svg도 사용할 수 있습니다

.logo {
  background: url(logo.svg);
}

SVG 파일은 BASE64 인코딩으로 변환한 다음 데이터 URI로 사용되어 웹 페이지에 기록됩니다. <img src="/static/imghwm/default1.png" data-src="data:image/svg+xml;base64,[data]" class="lazy" alt="HTML5가 SVG를 사용하는 방법(코드 예)" >、<object></object>、<embed></embed>、<iframe></iframe>

<img  src="/static/imghwm/default1.png" data-src="data:image/svg+xml;base64,[data]" class="lazy" alt="HTML5가 SVG를 사용하는 방법(코드 예)" >

SVG 구문

1 #🎜🎜 #

SVG 코드는 최상위 태그

<svg>
  <circle></circle>
</svg>

SVG 이미지의 일부만 표시하려면 viewBox 속성을 지정해야 합니다.

<svg>
  <circle></circle>
</svg>

속성 값에는 왼쪽 위 모서리의 가로 좌표와 세로 좌표, 뷰포트의 너비와 높이 등 4개의 숫자가 있습니다. 위 코드에서 SVG 이미지는 너비 100픽셀 x 높이 100픽셀이고 viewBox 속성은 뷰포트가 지점(50, 50)에서 시작하도록 지정합니다. 따라서 실제로 보이는 것은 오른쪽 하단 모서리에 있는 1/4원입니다.
뷰포트는 뷰포트가 위치한 공간에 맞아야 합니다. 위 코드에서 뷰포트 크기는 50 x 50입니다. SVG 이미지 크기가 100 x 100이므로 뷰포트는 SVG 이미지 크기에 맞게, 즉 4배로 확대됩니다.

width 속성과 height 속성을 지정하지 않고 viewBox 속성만 지정하면 SVG 이미지의 가로 세로 비율만 부여하는 것과 같습니다. 이 경우 SVG 이미지의 기본 크기는 포함된 HTML 요소의 크기와 같습니다.

2. 태그

태그는 원을 나타냅니다.

<svg>
  <circle></circle>
  <circle></circle>
  <circle></circle>
</svg>

위 코드는 세 개의 원을 정의합니다. 라벨의 cx, cy, r 속성은 각각 가로 좌표, 세로 좌표, 반지름이며 단위는 픽셀입니다. 좌표는

class 속성은 해당 CSS 클래스를 지정하는 데 사용됩니다.

.red {
  fill: red;
}

.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}

SVG의 CSS 속성은 웹 요소의 CSS 속성과 다릅니다.

fill: 채우기 색상
획: 획 색상 획-폭: 테두리 너비

3 🎜🎜#

태그는 직선을 그리는 데 사용됩니다.

<svg>
  <line></line>
</svg>

위 코드에서 태그의 x1 속성과 y1 속성은 선분의 시작점의 가로좌표와 세로좌표를 나타내고, x2 속성과 y2 속성은 가로좌표를 나타냅니다. 및 선분 끝의 세로좌표. 스타일 속성은 선분의 스타일을 나타냅니다.

4. 태그

태그는 다중선을 그리는 데 사용됩니다.

<svg>
  <polyline></polyline>
</svg>

의 포인트 속성은 각 끝점의 좌표를 지정하며 가로 좌표와 세로 좌표는 쉼표로 구분되며 점은 공백으로 구분됩니다.

5. 标签
标签用于绘制矩形。

<svg>
  <rect></rect>
</svg>

的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。

6. 标签
标签用于绘制椭圆。

<svg>
  <ellipse></ellipse>
</svg>

的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。

7. 标签
标签用于绘制多边形。

<svg>
  <polygon></polygon>
</svg>

的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

8. 标签

标签用于制路径。

<svg>
<path></path>
</svg>

的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。

M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径

9. 标签

标签用于绘制文本。

<svg>
  <text>肆客足球</text>
</svg>

的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。

10. 标签

标签用于复制一个形状。

<svg>
  <circle></circle>

  <use></use>
  <use></use>
</svg>

的href属性指定所要复制的节点，x属性和y属性是左上角的坐标。另外，还可以指定width和height坐标。

11. 标签

标签用于将多个形状组成一个组（group），方便复用。

<svg>
  <g>
    <text>圆形</text>
    <circle></circle>
  </g>

  <use></use>
  <use></use>
</svg>

12. 标签

标签用于自定义形状，它内部的代码不会显示，仅供引用。

<svg>
  <defs>
    <g>
      <text>圆形</text>
      <circle></circle>
    </g>
  </defs>

  <use></use>
  <use></use>
  <use></use>
</svg>

13. 标签
标签用于自定义一个形状，该形状可以被引用来平铺一个区域。

<svg>
  <defs>
    <pattern>
      <circle></circle>
    </pattern>
  </defs>
  <rect></rect>
</svg>

上面代码中，标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。

14. 标签
标签用于插入图片文件。

<svg>
  <image></image>
</svg>

上面代码中，的xlink:href属性表示图像的来源。

15. 标签
标签用于产生动画效果。

<svg>
  <rect>
    <animate></animate>
  </rect>
</svg>

上面代码中，矩形会不断移动，产生动画效果。

的属性含义如下。

attributeName：发生动画效果的属性名。
from：单次动画的初始值。
to：单次动画的结束值。
dur：单次动画的持续时间。
repeatCount：动画的循环模式。
可以在多个属性上面定义动画。

<animate></animate>
<animate></animate>

16. 标签
标签对 CSS 的transform属性不起作用，如果需要变形，就要使用标签。

<svg>
  <rect>
    <animatetransform></animatetransform>
  </rect>
</svg>

上面代码中，的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。

JavaScript 操作SVG

1. DOM操作
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。

<svg>
  <circle></circle>
<svg></svg></svg>

上面代码插入网页之后，就可以用 CSS 定制样式。

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #f8f8f8;
}

然后，可以用 JavaScript 代码操作 SVG。

var mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', function(e) {
  console.log('circle clicked - enlarging');
  mycircle.setAttribute('r', 60);
}, false);

上面代码指定，如果点击图形，就改写circle元素的r属性。

2. 获取 SVG DOM
使用<object></object>、<iframe></iframe>、<embed></embed>标签插入 SVG 文件，可以获取 SVG DOM。

var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();

注意，如果使用标签插入 SVG 文件，就无法获取 SVG DOM。

3. 读取 SVG 源码
由于 SVG 文件就是一段 XML 文本，因此可以通过读取 XML 代码的方式，读取 SVG 源码。

<p>
  <svg>
    <!-- svg code -->
  </svg>
</p>

使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。

var svgString = new XMLSerializer()
  .serializeToString(document.querySelector('svg'));

4. SVG 图像转为 Canvas 图像
首先，需要新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。

var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});

var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);

img.src = url;

然后，当图像加载完成后，再将它绘制到<canvas></canvas>元素。

img.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
};

小结

SVG能做的远不止这些，利用SVG做的动画效果，文字效果我们以后给大家详细讲解，今天就先到这里吧。

위 내용은 HTML5가 SVG를 사용하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!