工作需要学习一点SVG的相关知识,记录一下知识点和思路
SVG(可缩放矢量图形)
-
path
元素:
path
元素用于创建基于路径的图形,如直线、曲线、圆弧等。它通过一系列的绘制命令来描述路径的形状。每个绘制命令都是一个字母,后跟一些参数。例如,M
表示将画笔移动到一个特定的点,L
表示画一条直线到一个点,C
表示画一条三次贝塞尔曲线等等。path
元素可以包含多个绘制命令,从而创建复杂的路径图形。 -
use
元素:
use
元素用于重复使用一个已经定义好的图形元素。它通过引用一个symbol
元素或其他图形元素的id
属性来实现重用。use
元素的x
和y
属性可以用来指定图形元素的位置,width
和height
属性可以用来指定图形元素的大小。通过在文档中多次使用相同的use
元素,可以在不重复定义图形的情况下创建多个实例。 -
symbol
元素:
symbol
元素用于定义可重用的图形片段,但它本身并不会显示在页面上。symbol
元素可以包含任何其他的 SVG 元素,如路径 (path
)、矩形 (rect
)、圆 (circle
) 等等。与use
元素配合使用,symbol
元素可以创建可重复使用的图形模板。要在文档中使用symbol
元素,需要使用svg
元素的defs
子元素来定义,并使用use
元素引用它。
使用 path
元素可以直接创建图形,而 use
元素和 symbol
元素则允许在 SVG 中重复使用图形元素,从而实现更高效的图形定义和渲染。这些元素使得在 SVG 中创建复杂的图形和图形库变得更加容易。
-
xmlns
属性:
xmlns
是 XML Namespace 的缩写,用于声明命名空间。在SVG中,xmlns
属性用于定义SVG文档所使用的命名空间。它通常添加在svg
元素上,指示该文档是一个SVG文档。例如,xmlns="http://www.w3.org/2000/svg"
声明了SVG的命名空间。在SVG中,命名空间的声明允许使用特定的标记和属性,以便解析器可以正确地理解和处理SVG文档。它确保SVG文档与其他XML文档和命名空间不发生冲突。
-
transform
属性:
transform
属性用于对SVG元素进行变换(平移、缩放、旋转等)。它可以应用于任何具有几何属性的SVG元素,如rect
、circle
、path
等。transform
属性接受一个或多个变换函数,这些函数可以组合使用来实现复杂的变换效果。
你提供的SVG代码定义了一个SVG元素,并设置了版本号、宽度、高度和视口框(viewBox)。让我们逐个解释这些属性的含义:常用的变换函数包括:
translate(dx, dy)
:平移元素,将其沿x轴和y轴移动指定的距离。scale(sx, sy)
:缩放元素,将其按照指定的比例因子在x轴和y轴上进行缩放。rotate(angle, cx, cy)
:旋转元素,以(cx, cy)为中心点按照指定的角度旋转。skewX(angle)
和skewY(angle)
:对元素进行斜切变换。
多个变换函数可以通过空格或逗号分隔并串联在一起,以依次应用于元素。注意,变换是按照定义的顺序应用的,因此后面的变换会基于前面的变换结果进行操作。
例如,
transform="translate(100, 50) rotate(45)"
表示先将元素平移100个单位向右和50个单位向下,然后以默认中心点旋转45度。transform
属性可以在CSS样式中使用,也可以直接在SVG元素的属性中进行指定。
6.viewBox
属性:
viewBox="0 0 1720 1699.9999"
:定义了一个视口框(viewBox),用于描述SVG中可见部分的坐标范围。在这里,视口框的左上角坐标为(0, 0),宽度为1720,高度为1699.9999。
xmlns="http://www.w3.org/2000/svg"
:声明SVG文档所使用的命名空间为"http://www.w3.org/2000/svg"。这是必需的,以指定SVG文档的命名空间。
总结起来,xmlns
属性用于声明SVG文档的命名空间,transform 属性用于对SVG元素进行变换,从而实现平移、缩放、旋转等效果,而viewBox则可以让你调整想要的布局大小等。
以上是AI对于这几个元素的解释,在这之前对于SVG我是完全的0基础
我之所以这里查symbol元素,是因为我手里有一个svg图,里面的几个图形出了问题,因为业务需要,我得把里面所有点位都整理好,所以我不想重新来,很麻烦
我就想着用另一个 svg 文件(所需图形都完好的svg文件),把里面我需要的直接复制到现在这个svg图里(下文称svg1),但是这个新的svg图(svg2),它里面我需要的图形,用的是symbol和use实现
按照我当时的理解,我只需要把symbol和use复制过去就行了,不出意外果然出意外了,完全没有任何显示,我猜测可能是坐标的问题,因为两个svg图对应坐标肯定不一样,我把svg1里我需要的位置的坐标放到use里,
还是没用,这里我试了好久,后来放弃了,又去问了AI,又得到一个方法,symbol属性可以跨文件引用,就是在svg2中可以直接引用svg1中的symbol属性
具体步骤如下:
- 在SVG2文件中定义
symbol
元素,并赋予一个唯一的id
属性。
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="mySymbol">
<!-- 在这里定义你的图形元素 -->
</symbol>
</defs>
</svg>
- 在第SVG1文件中使用
use
元素来引用第一个SVG文件中的symbol
元素。
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href="path/to/first/svg#mySymbol" />
</svg>
上述代码中,xlink:href
属性指定了第一个SVG文件的路径和symbol
元素的id
属性。这样,第二个SVG文件就可以重复使用第一个SVG文件中定义的symbol
元素了。
需要注意的是,这种引用和重用方式需要确保两个SVG文件在同一域或者使用相对路径来引用,以避免跨域安全问题。
总结起来,虽然symbol
元素本身不能直接复制到另一个SVG中使用,但你可以通过使用use
元素来引用和重复使用symbol
元素,从而在不同的SVG文件中实现图形的复用。
还有个小知识点也记录一下,path元素中先执行d属性,后执行transform对d属性执行结果进行变换
PS:如果还没有解决问题,SVG在线编辑也许能帮你解决(有的需要梯子)
-
SVG-Edit: https://svg-edit.github.io/svgedit/
SVG-Edit是一个基于Web的开源SVG编辑器,提供了直观的界面和一系列的绘图工具,包括选择、绘制、编辑和变换等功能。 -
Vectr: https://vectr.com/
Vectr是一个免费的矢量图形编辑器,支持在线创建和编辑SVG图形。它具有用户友好的界面和实时协作功能。 -
Method Draw: http://editor.method.ac/
Method Draw是一个简单易用的在线SVG编辑器,提供了基本的绘图工具和编辑功能,可以快速创建和编辑SVG图形。 -
Boxy SVG: https://boxy-svg.com/
Boxy SVG是一个功能强大的在线SVG编辑器,提供了丰富的绘图和编辑工具,以及对图形属性、层级、路径和变换的控制。