如何使用XSLT修改SVG属性

时间:2019-06-24 09:10:18

标签: xslt svg xpath

如何使用XSLT修改SVG文件?

我想修改以下SVG(抠图)文件:

<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"添加到符号定义中。

这是我的XSL文件的当前版本:

<?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>

如何修改X symbol id="E050的颜色但其余部分未修改的XSL文件?

要测试修改,我正在使用在线工具https://www.w3schools.com/xml/tryxslt.asp?xmlfile=cdcatalog&xsltfile=cdcatalog_ex1

1 个答案:

答案 0 :(得分:1)

更改此行...

 <xsl:template match="//symbol[@id='E050']">

到此行。...

<xsl:template match="svg:symbol[@id='E050']">

(请注意,//前缀在模板匹配中不是必需的)

尽管XSLT(xmlns="http://www.w3.org/2000/svg")中有一个默认的名称空间声明,但这仅适用于XSLT中的未前缀元素(也恰好是XML文档),不适用于属性中的Xpath表达式。在symbol[@id='E050']上进行匹配的尝试是在没有名称空间的情况下匹配symbol元素。

或者,如果您可以使用XSLT 2.0,则可以将此行添加到xsl:stylesheet元素中,因为这意味着xpath表达式中未前缀的元素名称将被赋予一个命名空间

 xpath-default-namespace="http://www.w3.org/2000/svg"