NoteDeep
<path>元素是SVG基本形状中最强大的一个,它不仅能创建其他基本形状,还能创建更多其他形状。

直线:


M命令是移动画笔位置,但是不画线

L: Line to L需要两个参数,分别是一个点的x轴和y轴坐标,L命令将会在当前位置和新位置之间画一条线段。
H 水平线:一个参数,移动到x轴的位置
V 垂直线:一个参数,移动到y轴的位置
Z 闭合路径

<?xml version="1.0" standalone="no"?>
<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
</svg>

等同于:
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>


曲线:



填充和边框、使用CSS

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes


SVG 文本

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Texts


g元素

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Transformations

利用<g>元素,你可以把属性赋给一整个元素集合。实际上,这是它唯一的目的。一个示例:
<g fill="red">
<rect x="0" y="0" width="10" height="10" />
<rect x="20" y="0" width="10" height="10" />
</g>
两个矩形都变成红色了。




参考文献:
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths

评论列表

    直线:
    曲线:
    填充和边框、使用CSS
    SVG 文本
    g元素