<svg> <text> <def> 通过将文本参数<symbol>传递给

  • 本文关键字:symbol 参数 文本 svg text def svg
  • 更新时间 :
  • 英文 :


我创建了一个<symbol>,可以在文档中多次重复使用,它运行得很好:

<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,125,0);stop-opacity:1" />
</linearGradient>
<polygon id="hexagon" points="10,0 1.5,5 1.5,15 10,20 18.5,15 18.5,5" />
<polygon id="checkmark" points="3.5,21 5,19 7.5,22 15,14 16,15.5 7.5,24.5"/>
<symbol id="awsHex" viewBox="2 -2 300 300">
<use href="#hexagon" transform="translate(0 0) scale(4)"
fill="url(#grad1)" 
stroke="#FFD600" 
stroke-width="0.5" />
<use href="#hexagon" transform="translate(30 14)" 
fill="#00AA00" opacity="100%" />
<use href="#checkmark" transform="translate(30,5.5)" fill="#FFF" />
</symbol>
</defs>

它工作得很好,我可以像这样多次使用:

<use href="#awsHex" transform="translate(0 0)" /> 
<use href="#awsHex" transform="translate(120 0)"/>  
<use href="#awsHex" transform="translate(60 105)"/>  
<use href="#awsHex" transform="translate(180 105)"/>

我想在<symbol>中放一个文本元素,这样我就可以在保持文本在符号中的同时保持乘法重用。

<ref id="paramText" param="text-label">hexLabel</ref>
<symbol id="awsHex" viewBox="2 -2 300 300">
<use href="#hexagon" transform="translate(0 0) scale(4)"
fill="url(#grad1)" 
stroke="#FFD600" 
stroke-width="0.5" />
<use href="#hexagon" transform="translate(30 14)" 
fill="#00AA00" opacity="100%" />
<use href="#checkmark" transform="translate(30,5.5)" fill="#FFF" />
<text id="myLabel" x="40" y="50" font-family="Helvetica" 
font-weight="bold" text-anchor="middle" fill="white" font-size="10">
<tref xlink:href="#paramText" />
<param name="text-label" value="text-label" />
</text>
</symbol>

这显然不起作用,这就是我来这里的原因。

是否没有办法通过传入和覆盖文本内容来重用具有文本元素的符号?我似乎可以覆盖任何属性,但不能覆盖元素的内容?

有没有解决svg这一难题的方法?看起来他们在SVG标准中对此进行了研究,但可能还没有实现?SVG参数文档

否。

即使可以,符号也不会被参数化。符号用于多次重复使用相同的图形。

您可以使用一个符号来表示文本图形的背景,然后每次只需为文本部分添加一个新的<text>元素。

或者,您可以使用javascript来实现自定义元素。

<thing text="whatever"/>

JS将查找每个<thing>元素,并将其替换为<symbol>元素和<text>元素。

最新更新