使用XSLT将xlink替换为SVG中的内联

时间:2015-06-06 01:14:55

标签: xml xslt optimization svg xlink

我需要将所有 xlink 用法替换为SVG中的简单内联xml,然后删除" defs "部分并删除所有 boo :属性。需要这个是因为要使用的SVG查看器不支持xlinks。

初始简化XML

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <boo:metadata>
    <boo:text line-space="1.5" minimum-size="15" regular-size="20"/>
    </boo:metadata>
    <g transform="translate(149,60)">
        <rect x="0" y="0" fill-opacity="0.6" width="579" height="150"/>
            <defs><!-- huge section  with predefined items-->
                <g id="ne">
                    <path id="ne..."/>
                </g>
                <g id="nw">
                    <path id="nw.."/>
                </g>
                <g id="rt2">
                    <rect id="RT2" />
                    <path id="some cool path id"/>
                </g>
                <g id="rt3">
                    <rect id="rt3sss" rx="2" ry="2"/>
                </g>
                <g boo:type="Icon" id="AIRPORT" boo:replacementWords="FLUGHAFEN">
                    <rect id="ICON_AIRPORT" fill="#FCFFFF" height="15" width="15"/>
                    <path id="ICON_AIRPORTPATH"/>
                </g>
            </defs>

            <g boo:side="R" id="sssss" transform="translate(184,0)">
                <g transform="translate(0.000000,0.000000)">
                    <g boo:style="HorizontalAlignment:Center;VerticalAlignment:Bottom;" transform="translate(63.202000,126.903002)">   
                        <g transform="translate(0.000000,0.000000)">
                            <!-- actual usage -->
                            <use xlink:actuate="onLoad" xlink:type="simple" xlink:show="embed" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#NE" boo:style="HorizontalAlignment:Left;"/>
                        </g>
                        <g transform="translate(23.045999,0.000000)" boo:style="HorizontalAlignment:Left;Margin:0 5 0 5;">
                            <g transform="translate(0.000000,0.000000)" boo:style="Margin:0 1 0 1;">
                            <g transform="scale(1.150000,1.1500000)">
                                <!-- actual usage -->
                                <use xlink:actuate="onLoad" xlink:type="simple" xlink:show="embed" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#RT2"/>
                            </g>
                            <text transform="translate(16,13)" text-anchor="middle">4</text>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

预期结果

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(149,60)">
        <rect x="0" y="0" fill-opacity="0.6" width="579" height="150"/>
            <g id="sssss" transform="translate(184,0)">
                <g transform="translate(0.000000,0.000000)">
                    <g transform="translate(63.202000,126.903002)">   
                        <g transform="translate(0.000000,0.000000)">
                            <path id="ne..."/>
                        </g>
                        <g transform="translate(23.045999,0.000000)">
                            <g transform="translate(0.000000,0.000000)">
                            <g transform="scale(1.150000,1.1500000)">                           
                                <rect id="RT2" />
                                <path id="some cool path id"/>
                            </g>
                            <text transform="translate(16,13)" text-anchor="middle">4</text>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

2 个答案:

答案 0 :(得分:2)

我自己解决了这个问题。这里的主要复杂因素是XSL模板中的命名空间使用不正确。

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:boo="..." xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg">
    <!-- copy everything as is -->
    <xsl:template match="@*|node()" name="identity">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>
    <!-- replace xlink uses to real svg objects -->
    <xsl:template match="svg:use">
        <xsl:copy-of select="/*/*/*/*[@id=substring(current()/@xlink:href, 2)]"/>
    </xsl:template>
    <!-- remove unneeded defs section -->
    <xsl:template match="svg:defs"/>
    <!-- remove all unneeded cjv nodes and attributes -->
    <xsl:template match="@boo:*"/>
    <xsl:template match="boo:*"/>
    <!-- remove comments and whitespaces -->
    <xsl:strip-space elements="*"/>
    <xsl:template match="comment()"/>
    <!-- EXPERIMENTAL - remove id and type attributes -->
    <xsl:template match="@id"/>
    <xsl:template match="@type"/> 
</xsl:stylesheet>

答案 1 :(得分:0)

Better path would be

<xsl:template match="svg:use">
  <xsl:copy-of select="//*[@id=substring(current()/@xlink:href, 2)][1]"/>
</xsl:template>

'//*' matches, from the root, any descendant at any depth. the terminal '[1]' says that if there should happen to be two nodes with the specified id (which there should not be), choose the first.

In my own attack on this problem I also wanted to give the newly copied element the id of the replaced use element, but that proved tricky so I wrapped a g round it:

<xsl:template match="svg:use">
  <g>
    <!-- copy id, transform, etc through from use reference -->
    <xsl:apply-templates select="@*"/>
    <xsl:copy>
      <xsl:apply-templates select="//*[@id=substring(current()/@xlink:href, 2)][1]"/>
    </xsl:copy> 
  </g>
</xsl:template>

Finally, when you copy a template, you copy all the ids of all the elements in them, and, if you have multiple copies of a symbol as I do, that's a bad thing. So I translated all ids to classes:

<!-- generally, change ids to classes -->
<xsl:template match="@id">
  <xsl:attribute name="class">
    <xsl:value-of select="."/>
  </xsl:attribute>
</xsl:template>

Obviously I'm using xsl:copy rather than xsl:copy-of so that these fixes will work. There is a problem with my code - it wraps a spurious no-attributes use element around my generated g element - but it renders OK.