1

How can I modify a SVG file by using XSLT?

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>

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.

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>

How can I modify the XSL file that the color for the symbol id="E050 is changed but the rest is not modified?

To test the modification I'm using the online tool https://www.w3schools.com/xml/tryxslt.asp?xmlfile=cdcatalog&xsltfile=cdcatalog_ex1.

1 Answer 1

1

Change this line...

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

To this line....

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

(Note the // prefix is not necessary in a template match)

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.

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"
1
  • Thank you! Could you offer me a useful link for the default namespace part? I must confess that I have not fully understood this part yet.
    – Noroxs
    Jun 24, 2019 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.