svg基础 4 标记

 

• 标记

　　标记是对路径的自然补充。它们是可以添加到线和路径起点、终点和顶点的元素。最常用的是将箭头添加到线的终点，不过可以使用任何对象。

　　过程很简单：定义标记，然后使用 marker-start、marker-end 和 marker-mid 属性将其赋值给相关元素。例如：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg">
<desc>Markers</desc>
<defs>
<marker id="arrow"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth" markerWidth="3" markerHeight="10"
orient="auto">

<path d="M 0 0 L 10 5 L 0 10 z" fill="yellow" stroke="black"/>

</marker>
</defs>
<rect x="1" y="1" width="398" height="300"
fill="none" stroke="blue" />

<!-- First row -->
<path d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50"
stroke="purple" stroke-width="5" fill="none"
marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />

<!-- Second row -->
<path d="M75,200 c25,-75 50,50 100,0 s50,-50 150,50"
stroke="purple" stroke-width="3" fill="none"
marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
</svg>

　 　这个标记本身由一个简单的三角形路径组成，它由标记属性决定。已经设置了 viewBox，以便不管框是什么，标记本身总是会填充整个框。因为 markerUnits 值的缘故，框本身受应用标记线的大小影响。markerUnits 属性也被设置为 userSpaceOnUse，这使标记使用常规坐标系统。refX 和 refY 属性确定标记（该标记“附加”到它所标记的线）内的点。最后，标记的方位设为 auto，使它的 Y 轴与线的切线垂直。（为了理解这一方位，标记构建为指向 X 轴方向）。

　　请注意标记大小随笔划大小的改变而改变：



————————————————————
文本

• 添加文本

　　SVG 的强大能力之一是它可以将文本控制到标准 HTML 页面不可能有的程度，而无须求助图像或其它插件（后者会带来可访问性挑战）。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。

　　一个不足之处是 SVG 不执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。

　　可以使用 tspan 元素将文本元素分成几部分，允许每部分有各自的样式。在 text 元素中，空格的处理与 HTML 类似；换行和回车变成空格，而多个空格压缩成单个空格，如下面的早期示例所示：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<desc>Text</desc>
<defs>
</defs>

<g>

<text x="20" y="50" font-size="30">
Colors can be specified
</text>
<text x="20" y="100" font-size="30">by their
<tspan fill="rgb(255,0,0)">R</tspan>
<tspan fill="rgb(0,255,0)">G</tspan>
<tspan fill="rgb(0,0,255)">B</tspan>
values</text>
<text x="20" y="150" font-size="30">
or by keywords such as
</text>
<text x="20" y="200" font-size="30">
<tspan fill="lightsteelblue">lightsteelblue</tspan>,
</text>
<text x="20" y="250" font-size="30">
<tspan fill="mediumseagreen">mediumseagreen</tspan>,
</text>
<text x="20" y="300" font-size="30">and
<tspan fill="darkorchid">darkorchid</tspan>.
</text>

</g>
</svg>

• 使用 CSS 属性

　　实际上，所有的属性（对于所有元素，不仅是文本）都可以用级联样式表与一个元素关联，并且文本的所有 CSS 属性都在 SVG 图像中可用。

　　可以直接用样式属性设计元素的样式，或者引用样式表设计元素的样式。不应该解析样式表（因为它们偶尔包含会引起问题的字符），因此将它们置于 XML CDATA 节。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

<desc>Text</desc>
<defs>
<style type="text/css">
<![CDATA[
.abbreviation { text-decoration: underline; }
]]>
</style>
</defs>

<g>

<text x="20" y="50" font-size="30">Colors can be specified</text>
<text x="20" y="100" font-size="30">by their
<tspan fill="rgb(255,0,0)" class="abbreviation">R</tspan>
<tspan fill="rgb(0,255,0)" class="abbreviation">G</tspan>
<tspan fill="rgb(0,0,255)" class="abbreviation">B</tspan>
values</text>
<text x="20" y="150" font-size="30">or by keywords such as</text>
<text x="20" y="200">
<tspan style="fill: lightsteelblue; font-size:30">
lightsteelblue
</tspan>,
</text>
. . .
</g>
</svg>

• 路径上的文字

　　在纯 HTML 中不可能具有的一个 SVG 能力是将文本沿路径排列。要实现这一点，需创建一个链接到预定义的路径信息的 textPath 元素：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Text on a path</desc>
<defs>
<path id="wavyPath"
d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50"/>
</defs>
<rect x="1" y="1" width="398" height="200"
fill="none" stroke="blue" />

<text x="50" y="50" font-size="14">
<textPath xlink:href="#wavyPath" mce_href="#wavyPath">
Text travels along any path that you define for it.
</textPath>
</text>

</svg>