如何使用 XSLT 修改 SVG 属性 [英] How to modify a SVG attribute using XSLT
本文介绍了如何使用 XSLT 修改 SVG 属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使用 XSLT 修改 SVG 文件?
How can I modify a SVG file by using XSLT?
我喜欢修改以下 SVG (cutout) 文件:
I like to modify the following SVG (cutout) file:
<svg width="834px" height="707.5px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="visible">
<defs>
<symbol id="E003" viewBox="0 0 1000 1000" overflow="inherit">
<path transform="scale(1,-1)" d="M0 -0c49 0 97.5 -2.26367 135.5 4.73633c206 95 258.5 264.264 263.5 271.264c0 1 -14 7 -15 6c-88 -154 -251 -167 -321 -170c-1 0 -63 -1 -63 -1v-111z" />
</symbol>
<symbol id="E004" viewBox="0 0 1000 1000" overflow="inherit">
<path transform="scale(1,-1)" d="M0 0c49 0 97.5 2.26367 135.5 -4.73633c206 -95 258.5 -264.264 263.5 -271.264c0 -1 -14 -7 -15 -6c-88 154 -251 167 -321 170c-1 0 -63 1 -63 1v111z" />
</symbol>
<symbol id="E050" viewBox="0 0 1000 1000" overflow="inherit">
<path transform="scale(1,-1)" d="M441 -245c-23 -4 -48 -6 -76 -6c-59 0 -102 7 -130 20c-88 42 -150 93 -187 154c-26 44 -43 103 -48 176c-4 60 11 123 44 189c29 57 65 106 110 148s96 85 153 127c-3 16 -8 46 -13 92c-4 43 -5 73 -5 89c0 117 16 172 69 257c34 54 64 82 89 82c21 0 43 -30 69 -92 s39 -115 41 -159c2 -120 -19 -173 -67 -256c-13 -20 -63 -90 -98 -118c-13 -9 -25 -19 -37 -29l31 -181c8 1 18 2 28 2c58 0 102 -12 133 -35c59 -43 92 -104 98 -184c11 -135 -80 -229 -180 -270c8 -57 17 -110 25 -162c5 -31 6 -58 6 -80c0 -30 -5 -53 -14 -70 c-35 -64 -88 -99 -158 -103c-42 -3 -83 6 -124 26c-50 24 -77 59 -80 105c-2 34 5 63 20 87c18 28 45 42 79 44c51 4 99 -40 103 -87c4 -56 -30 -94 -105 -115c17 -24 51 -36 102 -36c62 0 116 43 140 85c9 16 13 41 13 74c0 20 -1 42 -5 67c-8 53 -18 106 -26 159zM461 939 c-95 0 -135 -175 -135 -286c0 -24 2 -48 5 -71c50 39 92 82 127 128c43 57 63 106 60 148c-4 54 -23 82 -57 81zM406 119l54 -326c80 27 116 88 109 184c-7 99 -62 146 -163 142zM382 117c-74 -2 -132 -50 -128 -127c2 -46 43 -99 75 -115c-3 -2 -7 -5 -10 -10 c-70 33 -116 88 -123 172c-5 73 42 135 88 170c23 17 49 29 78 36l-29 170c-21 -13 -52 -37 -92 -73c-50 -44 -86 -84 -109 -119c-49 -75 -71 -140 -67 -195c5 -68 35 -127 93 -176s125 -73 203 -73c25 0 50 3 75 9c-19 111 -36 221 -54 331z" />
</symbol>
<symbol id="E260" viewBox="0 0 1000 1000" overflow="inherit">
<path transform="scale(1,-1)" d="M20 110c32 16 54 27 93 27c26 0 35 -3 54 -13c13 -7 24 -20 27 -38l4 -25c0 -28 -16 -57 -45 -89c-23 -25 -39 -44 -65 -68l-88 -79v644h20v-359zM90 106c-32 0 -48 -10 -70 -29v-194c31 31 54 59 71 84c21 32 32 59 32 84c0 9 1 16 1 20c0 14 -3 21 -11 30l-8 3z" />
</symbol>
<symbol id="E0A4" viewBox="0 0 1000 1000" overflow="inherit">
<path transform="scale(1,-1)" d="M0 -39c0 68 73 172 200 172c66 0 114 -37 114 -95c0 -84 -106 -171 -218 -171c-64 0 -96 30 -96 94z" />
</symbol>
<symbol id="E262" viewBox="0 0 1000 1000" overflow="inherit">
<path transform="scale(1,-1)" d="M136 186v169h17v-164l44 14v-91l-44 -14v-165l44 12v-91l-44 -13v-155h-17v150l-76 -22v-155h-17v149l-43 -13v90l43 14v167l-43 -14v92l43 13v169h17v-163zM60 73v-167l76 22v168z" />
</symbol>
</defs>
<style type="text/css">g.page-margin{font-family:Times;} g.tempo{font-weight:bold;} g.dir, g.dynam, g.mNum{font-style:italic;} g.label{font-weight:normal;}</style>
<svg class="definition-scale" viewBox="0 0 16680 14150">
<g class="page-margin" transform="translate(500, 500)">
<g class="system" id="system-0000000155158177">
<path d="M2099 720 L2099 5782" stroke="#000000" stroke-width="27" />
<use xlink:href="#E003" x="1919" y="720" height="720px" width="720px" />
<use xlink:href="#E004" x="1919" y="5782" height="720px" width="720px" />
<rect x="1919" y="702" height="5098" width="90" />
<use xlink:href="#E003" x="1797" y="720" height="720px" width="720px" />
<use xlink:href="#E004" x="1797" y="2880" height="720px" width="720px" />
<rect x="1797" y="702" height="2196" width="90" />
<g class="labelAbbr" id="labelAbbr-0000001982553912">
<text x="1546" y="1170" text-anchor="end" font-size="0px">
<tspan class="text" id="text-0000000427332132">
<tspan font-size="405px" class="text">C Tpt. 1</tspan>
</tspan>
</text>
</g>
<g class="labelAbbr" id="labelAbbr-0000001715657114">
<text x="1546" y="2610" text-anchor="end" font-size="0px">
<tspan class="text" id="text-0000000786186729">
<tspan font-size="405px" class="text">C Tpt. 2</tspan>
</tspan>
</text>
</g>
<g class="labelAbbr" id="labelAbbr-0000000404188205">
<text x="1816" y="4072" text-anchor="end" font-size="0px">
<tspan class="text" id="text-0000000700385974">
<tspan font-size="405px" class="text">Tbn.</tspan>
</tspan>
</text>
</g>
<g class="labelAbbr" id="labelAbbr-0000001796530924">
<text x="1816" y="5512" text-anchor="end" font-size="0px">
<tspan class="text" id="text-0000000675162848">
<tspan font-size="405px" class="text">B. Tbn.</tspan>
</tspan>
</text>
</g>
<g class="sb" id="sb-0000001000252933" />
<g class="measure" id="d1e4299">
<g class="mNum autogenerated" id="mnum-0000001212157683">
<text x="2086" y="450" text-anchor="middle" font-size="0px">
<tspan class="text" id="text-0000001704302739">
<tspan font-size="324px" class="text">22</tspan>
</tspan>
</text>
</g>
<g class="staff" id="staff-0000001329456927">
<path d="M2086 720 L7292 720" stroke="#000000" stroke-width="13" />
<path d="M2086 900 L7292 900" stroke="#000000" stroke-width="13" />
<path d="M2086 1080 L7292 1080" stroke="#000000" stroke-width="13" />
<path d="M2086 1260 L7292 1260" stroke="#000000" stroke-width="13" />
<path d="M2086 1440 L7292 1440" stroke="#000000" stroke-width="13" />
<g class="clef" id="clef-0000001591308631">
<use xlink:href="#E050" x="2176" y="1260" height="720px" width="720px" />
</g>
<g class="keySig" id="keysig-0000000362821479">
<use xlink:href="#E260" x="2857" y="1080" height="720px" width="720px" />
</g>
<g class="layer" id="layer-0000001762708701">
<g class="note" id="d1e4305">
<use xlink:href="#E0A4" x="3559" y="1350" height="720px" width="720px" />
<g class="stem">
<rect x="3767" y="720" height="608" width="18" />
</g>
<g class="accid" id="accid-0000001439359008">
<use xlink:href="#E262" x="3364" y="1350" height="720px" width="720px" />
</g>
</g>
<g class="note" id="d1e4323">
<use xlink:href="#E0A4" x="4423" y="1350" height="720px" width="720px" />
<g class="stem">
<rect x="4631" y="720" height="608" width="18" />
</g>
<g class="accid" id="accid-0000000550318292" />
</g>
<g class="note" id="d1e4339">
<use xlink:href="#E0A4" x="5551" y="1260" height="720px" width="720px" />
<g class="stem">
<rect x="5759" y="630" height="608" width="18" />
</g>
</g>
<g class="note" id="d1e4353">
<use xlink:href="#E0A4" x="6415" y="900" height="720px" width="720px" />
<g class="stem">
<rect x="6415" y="922" height="608" width="18" />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</svg>
我想更改 symbol id="E050" 的颜色.为了实现这一点，我尝试将属性 fill="#ff0000" 添加到符号定义中.
I want to change the color for the symbol id="E050". To achieve this I tried to add the attribute fill="#ff0000" to the symbol definition.
这是我的 XSL 文件的当前版本:
This is the current version of my XSL file:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<xsl:template match="node() | @*">
<xsl:copy>
<xsl:apply-templates select="node() | @*"/>
</xsl:copy>
</xsl:template>
<xsl:template match="//symbol[@id='E050']">
<xsl:copy>
<xsl:apply-templates select="@*"/>
<xsl:attribute name="fill">#ff0000</xsl:attribute>
<xsl:apply-templates select="node()"/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
如何修改symbol id="E050的颜色已更改但其余部分未修改的XSL文件?
How can I modify the XSL file that the color for the symbol id="E050 is changed but the rest is not modified?
为了测试修改，我使用了在线工具 https://www.w3schools.com/xml/tryxslt.asp?xmlfile=cdcatalog&xsltfile=cdcatalog_ex1.
To test the modification I'm using the online tool https://www.w3schools.com/xml/tryxslt.asp?xmlfile=cdcatalog&xsltfile=cdcatalog_ex1.
推荐答案
更改此行...
<xsl:template match="//symbol[@id='E050']">
到这一行....
<xsl:template match="svg:symbol[@id='E050']">
(注意 // 前缀在模板匹配中不是必需的)
(Note the // prefix is not necessary in a template match)
尽管您的 XSLT (xmlns="http://www.w3.org/2000/svg") 中有一个默认的命名空间声明，但这仅适用于您的 XSLT 中的无前缀元素(即也恰好是一个 XML 文档)，而不是属性中的 Xpath 表达式.在 symbol[@id='E050'] 上进行匹配是试图匹配没有命名空间的 symbol 元素.
Although you have a default namespace declaration in your XSLT (xmlns="http://www.w3.org/2000/svg") this only applies to unprefixed elements in your XSLT (which also happens to be an XML document), not Xpath expressions in attributes. This doing a match on symbol[@id='E050'] is trying to match a symbol element in no namespace.
或者，如果您可以使用 XSLT 2.0，您可以将这一行添加到 xsl:stylesheet 元素，因为这意味着 xpath 表达式中未带前缀的元素名称将被赋予一个命名空间
Alternatively, if you could use XSLT 2.0, you could add this line to the xsl:stylesheet element, as this would then mean unprefixed element names in xpath expressions would be given a namespace
xpath-default-namespace="http://www.w3.org/2000/svg"
这篇关于如何使用 XSLT 修改 SVG 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
