我创建了一个<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>
元素。