Question

我有一个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

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

使用XSLT在HTML页面中显示SVG

1 个答案: