使用 XSLT 在 HTML 页面中显示 SVG答案

【问题标题】：Displaying SVG in HTML page using XSLT使用 XSLT 在 HTML 页面中显示 SVG
【发布时间】：2014-08-07 05:52:45
【问题描述】：

我有一个 SVG 图像作为 XML 文件的一部分，我想使用 XSLT 转换在我的 HTML 页面上显示该图像。我尝试使用 IMG 标签，但图像未显示。

我的包含 SVG 的 XML 文件段：

<topimagebase64>url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABUAAAAJACAYAAABMocy1AAAAIGNIUk0AAHomAACAhAAA+gAAAIDo&#13;
AAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dE&#13;
AP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAIABJREFUeNrs3Q+oXeWdL/wVJ1AvDTS+&#13;
zb11mFz0XlOMXEsjWlSqNKLepBgxUqUpV6mSSAwq6quiQUUlFVscUVFRsaKlioq5VNHSSJQoOuhQ&#13;
................ 
')</topimagebase64>

（由于篇幅限制，无法发布全文）

我的 XSLT：

<img src= "//topimagebase64" width="30% " margin-top="20px" margin-left="10px"/>

任何帮助将不胜感激。

问候， Saumya Govil

【问题讨论】：

标签： html xml xslt svg

【解决方案1】：

url('data:...) 不是普通的 SVG 图像，它是Data URI，即简单的二进制数据。但是，如果您不想使用 CSS 而是使用 img 元素，则需要剥离 url() 包装器。以下 XSLT 1.0 转换...

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <body>
                <img src="{ substring( normalize-space(//topimagebase64), 5, string-length(//topimagebase64)-5)}" />
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

...在这个 XML 上工作：

<?xml version="1.0"?>
<root>
    <topimagebase64>url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)</topimagebase64>
</root>

或者，使用 CSS：

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <style>
                    div {
                        background: <xsl:value-of select="//topimagebase64" />;
                        width: 500px;
                        height: 500px;
                    }
                </style>
            </head>
            <body>

                <div></div>

            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

【讨论】：

如果您使用带有固定索引的substring()，我建议您使用translate(normalize-space(topimagebase64), ' ', '') 以确保您剪切出正确的部分，而不管输入字符串布局如何。