svg常见操作

<link> 直线

x1=“0” y1=“0” 开始点的位置

x2=“100” y2=“100” 结束点的位置

<svg>
    <line x1="0" y1="0" x2="100" y2="100" stroke="pink" stroke-width="10"></line>
</svg>

<polyline> 折线

points 设置多个点

    <style>
      .polyline {
        stroke: red;
        stroke-width: 10;
        fill: none;
      }
    </style>
    <svg>
      <polyline points="50,50 50,100 100,100" class="polyline"></polyline>
    </svg>

<circle>圆

cx：x轴位置

cy：y轴位置

r：圆的半径

<svg>
  <circle cx="50" cy="50" r="50" />
</svg>

<ellipse>椭圆

cx：x轴位置

cy：y轴位置

xr：x轴圆的半径

ry：y轴圆的半径

<svg>
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>

<rect>矩形

x：x轴的位置

y：y轴的位置

width：宽度

height：高度

rx：x轴的半径

yx：y轴的半径

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>

<polygon>多边形

points：每个点的位置

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 具有默认填充的多边形示例 -->
  <polygon points="0,100 50,25 50,75 100,0" />

  <!-- 具有描边但无填充的相同的多边形形状示例 -->
  <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>

<path>路径

d：属性定义了一个要绘制的路径

• 移动到：M、m
• 画线至：L、l、H、h、V、v
• 三次方贝塞尔曲线：C、c、S、s
• 二次方贝塞尔曲线：Q、q、T、t
• 椭圆曲线：A、a
• 封闭路径：Z、z

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

<use>复制

xlink:href：复制元素的id

x：x轴的位置（相对于原有的位置）

y：y轴的位置（相对于原有的位置）

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    .classA { fill:red }
  </style>
  <defs>
    <g id="Port">
      <circle style="fill:inherit" r="10"/>
    </g>
  </defs>

  <text y="15">black</text>
  <use x="50" y="10" xlink:href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
 </svg>

<g>组

没有专属属性，搭配use使用

<svg
  width="100%"
  height="100%"
  viewBox="0 0 95 50"
  xmlns="http://www.w3.org/2000/svg">
  <g stroke="green" fill="white" stroke-width="5">
    <circle cx="25" cy="25" r="15" />
    <circle cx="40" cy="25" r="15" />
    <circle cx="55" cy="25" r="15" />
    <circle cx="70" cy="25" r="15" />
  </g>
</svg>

<defs>定义重复的元素

SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加 SVG 内容的易读性和无障碍。在defs元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用 ``元素呈现这些元素。

没有专属属性

<svg width="80px" height="30px" viewBox="0 0 80 30"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="60" height="10"
        fill="url(#Gradient01)"  />
</svg>

<pattern>自定图案

提供给属性 fill 或属性 stroke 引用用来填充或描边的图案

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
    </pattern>
  </defs>

  <circle cx="50" cy="50" r="50" fill="url(#star)" />
  <circle
    cx="180"
    cy="50"
    r="40"
    fill="none"
    stroke-width="20"
    stroke="url(#star)" />
</svg>

patternUnits属性

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- userSpaceOnUse  所有几何属性都是相对于当前用户空间的-->
  <pattern
    id="p1"
    x="12.5"
    y="12.5"
    width="25"
    height="25"
    patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- objectBoundingBox 有几何属性都相对于目标边界框 默认的 -->
  <pattern
    id="p2"
    x=".125"
    y=".125"
    width=".25"
    height=".25"
    patternUnits="objectBoundingBox">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Left square with user space tiles -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />

  <!-- Right square with bounding box tiles -->
  <rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
</svg>

<animate>动画

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
      attributeName="rx"
      values="0;5;0"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
</svg>

js动态操作svg

需要使用createElementNS 函数创建的元素才能够添加进去，配合命名空间

  <svg xmlns="http://www.w3.org/2000/svg" class="svg">
  </svg>

    let svg = document.querySelector(".svg");
    let line = document.createElementNS('http://www.w3.org/2000/svg', "line");
    svg.setAttribute('id', 'svg')
    line.setAttribute('x1', '100')
    line.setAttribute('y1', '100')
    line.setAttribute('x2', '100')
    line.setAttribute('y2', '600')
    line.setAttribute('class', 'line')
    svg.appendChild(line)