首页 > 解决方案 > 如何将内联 SVG 嵌入到 XSL 文件中?

问题描述

我想通过 XSL 将 SVG 图像直接嵌入到我的 HTML 代码中。

如何才能做到这一点?

我可以这样直接粘贴:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html"
    omit-xml-declaration="yes"
    media-type="text/html"
    encoding="utf-8"
    doctype-system="about:legacy-compat"
    indent="no"/>

<xsl:template match="/">

    <html>

    <body>

      <a id="logo" href="/">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 474.98 81.72"><polygon class="a" points="59.59 47.67 59.59 61.29 45.97 61.29 45.97 47.67 45.97 34.05 45.97 20.43 59.59 20.43 59.59 34.05 59.59 47.67 59.59 47.67"/><polygon class="a" points="100.44 45.97 100.44 61.29 86.83 61.29 86.83 45.97 86.83 30.64 86.83 15.32 86.83 0 100.44 0 100.44 15.32 100.44 30.64 100.44 45.97 100.44 45.97"/><polygon class="a" points="80.02 45.97 80.02 61.29 66.4 61.29 66.4 45.97 66.4 30.64 66.4 15.32 66.4 0 80.02 0 80.02 15.32 80.02 30.64 80.02 45.97 80.02 45.97"/><polygon class="a" points="120.87 47.67 120.87 61.29 107.25 61.29 107.25 47.67 107.25 34.05 107.25 20.43 120.87 20.43 120.87 34.05 120.87 47.67 120.87 47.67"/><path class="a" d="M141.3,47.67V61.29H127.68V40.86a20.43,20.43,0,0,1,40.86,0V61.29H154.92V40.86h0a6.81,6.81,0,0,0-13.62,0h0v6.81Z"/><path class="a" d="M13.62,40.83v0h0A6.81,6.81,0,1,0,20.43,34a6.81,6.81,0,0,0-6.81,6.81ZM0,40.86V0H13.62V21.59A20.43,20.43,0,1,1,0,40.86Z"/><path class="a" d="M195.78,20.43a20.43,20.43,0,1,0,20.43,20.43,20.43,20.43,0,0,0-20.43-20.43Zm0,13.62a6.81,6.81,0,1,0,6.81,6.81A6.81,6.81,0,0,0,195.78,34Z"/><path class="b" d="M451.15,40.86a3.41,3.41,0,0,0,3.4,3.41h20.12a20.42,20.42,0,1,0-.88,3.4H454.55a6.81,6.81,0,1,1,5.89-10.22h-5.89A3.41,3.41,0,0,0,451.15,40.86Z"/><path class="b" d="M240,40.86a3.41,3.41,0,0,0,3.4,3.41h20.12a20.42,20.42,0,1,0-.88,3.4H243.45a6.81,6.81,0,1,1,5.89-10.22h-5.89A3.41,3.41,0,0,0,240,40.86Z"/><path class="a" d="M175.35,61.29a20.43,20.43,0,1,0,40.86,0H202.59a6.81,6.81,0,1,1-13.62,0Z"/><path class="a" d="M52.78,0a6.81,6.81,0,1,0,6.81,6.81A6.81,6.81,0,0,0,52.78,0Z"/><path class="a" d="M114.06,0a6.81,6.81,0,1,0,6.81,6.81A6.81,6.81,0,0,0,114.06,0Z"/><polygon class="b" points="366.03 47.67 366.03 61.29 379.64 61.29 379.64 40.86 379.64 34.05 379.64 20.43 366.03 20.43 366.03 34.05 366.03 47.67 366.03 47.67"/><path class="b" d="M284.31,47.67V61.29H270.69V40.86a20.43,20.43,0,0,1,40.86,0V61.29H297.93V40.86h0a6.81,6.81,0,0,0-13.62,0h0v6.81Z"/><path class="b" d="M413.69,47.67V61.29h13.62V40.86a20.43,20.43,0,0,0-40.86,0V61.29h13.62V40.86a6.81,6.81,0,0,1,13.62,0h0v6.81Z"/><path class="b" d="M338.79,20.43a20.43,20.43,0,1,0,20.43,20.43,20.43,20.43,0,0,0-20.43-20.43Zm0,13.62a6.81,6.81,0,1,0,6.81,6.81A6.81,6.81,0,0,0,338.79,34Z"/><path class="b" d="M318.36,61.29a20.43,20.43,0,0,0,40.86,0H345.6a6.81,6.81,0,0,1-13.62,0Z"/><path class="b" d="M372.84,0A6.81,6.81,0,1,1,366,6.81,6.81,6.81,0,0,1,372.84,0Z"/></svg>
      </a>

    </body>

    </html>

</xsl:template>

</xsl:stylesheet>

但是,如果我只想在我的images文件夹中引用一个 SVG 文件怎么办?

我试过这样的事情:

<xsl:value-of select="document(../images/logo.svg)"/>

但不幸的是无法让它工作。

有任何想法吗?

标签: svgxslt

解决方案


如果你想从另一个文档中复制一些 XML 节点,你总是需要xsl:copy-of例如<xsl:copy-of select="document('images/logo.svg')"/>. xsl:value-of始终使用所选任何内容的字符串值创建一个文本节点,因此插入节点没有用。


推荐阅读