Question

我在html5页面上渲染svgs内联。为了方便起见，我希望在每个svgs中都有一个嵌套样式块，而不是使用表示属性或将所有内容移动到主样式表。

＆＃xA;＆＃xA;

但我是在当前时间也使用vue.js并且似乎存在冲突。

＆＃xA;＆＃xA;

我在尝试此操作时在浏览器控制台中出现错误（并且svg最初出现，然后变黑），这似乎来自Vue加载器。

＆＃xA;＆＃xA;

老实说，我并不清楚究竟发生了什么。如果有人想解释，将不胜感激！感谢

＆＃XA;

Answer 1

这是一种解决方法，在您的SVG文件中，将style标记更改为svg:style，例如：

<svg version="1.1" id="icon__nav-desktop_toggle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
    <svg:style type="text/css">
        <![CDATA[
            .icon__nav-toggle_circle{fill:none;stroke-width:3.1747;stroke-miterlimit:10;}
            .icon__nav-toggle_arrow{fill:none;stroke-width:3.1747;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        ]]>
    </svg:style>
    <polyline id="leftnav-dsk__arrow" class="icon__nav-toggle_arrow" points="24.4,17 39.6,32.1 24.4,47"/>
    <circle id="leftnav-dsk__outer-circle" class="icon__nav-toggle_circle" cx="32" cy="32" r="29"/>
</svg>

VueJS解析器无法识别，因此它会忽略它并继续前进。但它仍然是有效的HTML。

Answer 2

检查我对类似问题的回答： https://stackoverflow.com/a/56855843/10400487 您只需要删除svg文件中的样式标签，然后将其放入vue组件的样式中即可。
确保已安装vue-svg-inline-loader和vue-svg-loader

我可以在使用vue.js时在内联svg中使用<style>吗？

2 个答案: