SVG学习笔记二

最新推荐文章于 2025-07-10 18:59:23 发布

原创最新推荐文章于 2025-07-10 18:59:23 发布 · 470 阅读

1 ·

CC 4.0 BY-SA版权

SVG动画专栏收录该内容

2 篇文章

订阅专栏

本文介绍了SVG中的元素及其使用，强调了元素预定义图形的重要性，并详细讲解了stroke属性家族，包括stroke-width、stroke-linecap和stroke-dasharray。同时，探讨了如何创建虚线以及strokelinecap属性对路径终结的影响。此外，还提及了SVG滤镜的应用，特别是模糊效果的实现，通过和元素定义并应用滤镜。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

svg文字
在这里插入图片描述

<svg>
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

SVG的<defs>元素用于预定义一个元素使其能够在SVG图像中重复使用。
在<defs>元素中定义的图形不会直接显示在SVG图像上。
要引用<path>元素，必须在<path>元素上设置一个ID，通过ID来引用它。<use>元素通过xlink:href属性来引入<path>元素。注意在ID前面要添加一个#。
SVG <symbol>元素用于定义可重复使用的符号。
SVG <use>元素可以在SVG图像中多次重用一个预定义的SVG图形

``` ```

<svg>
     <text x="10" y="20" style="fill:red;">Several lines:
        <tspan x="10" y="45">First line</tspan>
        <tspan x="10" y="70">Second line</tspan>
     </text>
    <a xlink:href="http://www.w3cschool.cc/svg/" target="_blank">
    	<text x=1"0" y="95" fill="red">I love SVG</text>
    </a>
</svg>

SVG Stroke 属性
SVG提供了一个范围广泛stroke 属性。在本章中，我们将看看下面：
stroke
stroke-width
stroke-linecap
stroke-dasharray

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="blue" d="M5 40 l215 0" />
    <path stroke="black" d="M5 60 l215 0" />
  </g>
</svg>

strokelinecap属性定义不同类型的开放路径的终结：
stroke和stroke-*的属性可以继承

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

strokedasharray属性用于创建虚线：
绘制虚线: 一个参数时：表示一段虚线长度和每段虚线之间的间距
两个参数或者多个参数时：一个表示长度，一个表示间距

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

strokelinecap属性定义不同类型的开放路径的终结：
stroke和stroke-*的属性可以继承

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

<defs> 和 <filter>
所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）定义。
<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜？
<feGaussianBlur> 元素是用于创建模糊效果：
SVG模糊效果
在这里插入图片描述

<svg>
      <defs>
        <filter id="f1" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
        </filter>
      </defs>
      <rect width="90" height="90" stroke="green" stroke-width="3"
      fill="yellow" filter="url(#f1)" />
    </svg>

<filter>元素id属性定义一个滤镜的唯一名称
<feGaussianBlur>元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
<rect>元素的滤镜属性用来把元素链接到"f1"滤镜

SVG阴影

在这里插入图片描述

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>