SVG:关于对可变文本值使用<defs>和<use>
SVG:关于对可变文本值使用<defs>和<use>
提问于 2009-09-14 15:20:33
我有以下SVG源代码，可以生成许多带文本的框：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
<defs>
</defs>
<title>Draw</title>
<g transform="translate(50,40)">
<rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" />
<text text-anchor="middle" x="40">Text</text>
</g>
<g transform="translate(150,40)">
<rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" />
<text text-anchor="middle" x="40">Text 2</text>
</g>
<g transform="translate(250,40)">
<rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" />
<text text-anchor="middle" x="40">Text 3</text>
</g>
</svg>如您所见，当SVG具有<defs>和<use>元素时，我将<g></g>重复了三次以获得三个这样的框，这些元素允许使用id引用重用元素，而不是重复它们的定义。类似于：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
<defs>
<marker style="overflow:visible;fill:inherit;stroke:inherit"
id="Arrow1Mend" refX="0.0" refY="0.0" orient="auto">
<path transform="scale(0.4) rotate(180) translate(20,0)"
style="fill-rule:evenodd;stroke-width:2.0pt;marker-start:none;"
d="M 0.0,-15.0 L -20.5,0.0 L 0.0,15.0 "/>
</marker>
<line marker-end="url(#Arrow1Mend)" id="systemthread" x1="40" y1="10" x2="40" y2="410" style="stroke: black; stroke-dasharray: 5, 5; stroke-width: 1; "/>
</defs>
<title>Draw</title>
<use xlink:href="#systemthread" transform="translate(50,40)" />
<use xlink:href="#systemthread" transform="translate(150,40)" />
<use xlink:href="#systemthread" transform="translate(250,40)" />
</svg>不幸的是，我不能使用第一个SVG代码做到这一点，因为我需要每个框的文本是不同的，而<use>标记只是100%地复制了<defs>中定义的内容。
有没有办法将<defs>和<use>与函数调用之类的参数/自变量机制一起使用？
回答 2
Stack Overflow用户
回答已采纳
发布于 2009-09-15 05:44:53
我还不知道用当前的svg推荐来实现这一点的方法。
但是有一个SVG2.0模块的工作草案，请参阅：SVG Referenced Parameter Variables。这里有花的例子就是你想要的！但是，你可能要等到2010年6月，甚至更长时间，直到这成为W3C的建议，并得到客户的支持。
现在，您可能可以使用脚本来解决它。
Stack Overflow用户
发布于 2010-05-09 16:16:32
我正在寻找我自己的SVG问题的答案。你的问题帮助我解决了我的答案，所以我回答你的问题。
……仔细阅读你的问题。包含两个代码示例
示例#1.包含文本的框
示例#2.带文本的箭头
示例1
<html>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="900">
<defs>
<g id="my_box"
desc="my rectangle template">
<rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" />
</g>
</defs>
<g transform="translate(50 40)">
<text text-anchor="middle" x="40"> This little box went to market </text>
<use xlink:href="#my_box" />
</g>
<g transform="translate(150 140)">
<use xlink:href="#my_box" />
<text text-anchor="middle" x="40"> This little box stayed home </text>
</g>
<g transform="translate(250 240)">
<use xlink:href="#my_box" />
<text text-anchor="middle" x="40"> This little box had roast beef </text>
</g>
</svg>
</html>注意，在示例1中，框和文本的顺序很重要。
示例2
<html>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="900">
<defs>
<g id="arrow"
desc="arrow with a long dashed tail">
<marker style="overflow:visible;fill:inherit;stroke:inherit"
id="Arrow1Mend" refX="0.0" refY="0.0" orient="auto">
<path transform="scale(0.4) rotate(180) translate(20,0)"
style="fill-rule:evenodd;stroke-width:2.0pt;marker-start:none;"
d="M 0.0,-15.0 L -20.5,0.0 L 0.0,15.0 "
desc="The actual commands to draw the arrow head"
/>
</marker>
<line transform="translate(0 -450)"
marker-end="url(#Arrow1Mend)"
x1="40" y1="10" x2="40" y2="410"
style="stroke: black; stroke-dasharray: 5, 5; stroke-width: 1; "
desc="This is the tail of the 'arrow'"
/>
</g>
</defs>
<g transform="translate(100 450)">
<text> Text BEFORE xlink </text>
<use xlink:href="#arrow" />
</g>
<g transform="translate(200 550)">
<use xlink:href="#arrow" />
<text> More to say </text>
</g>
<g transform="translate(300 650)">
<use xlink:href="#arrow" />
<text> The last word </text>
</g>
<g transform="translate(400 750)">
<use xlink:href="#arrow" />
<text> Text AFTER xlink </text>
</g>
</svg>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1422238
复制相关文章
相似问题