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

【问题标题】：Can I use <style> inside of inline svg while using vue.js?在使用 vue.js 时，我可以在内联 svg 中使用 <style> 吗？
【发布时间】：2018-01-01 14:42:16
【问题描述】：

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

但是我目前也在用vue.js，好像有冲突。

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

老实说，我不太清楚到底发生了什么。如果有人愿意解释，将不胜感激！谢谢。

【问题讨论】：

你能显示导致问题的代码部分吗>
您可以将 v-bind:style="..." 与 vue 一起使用，如本示例所示，您可以在模板中使用 svg vuejs.org/v2/examples/svg.html

标签： vue.js inline-svg

【解决方案1】：

查看我对类似问题的回答： https://stackoverflow.com/a/56855843/10400487 您只需要删除 svg 文件中的样式标签并将其放入 vue 组件的样式中
一定要安装 vue-svg-inline-loader 和 vue-svg-loader

【讨论】：

【解决方案2】：

这是一种解决方法，在您的 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。

【讨论】：

非常感谢@jesal。非常聪明！抱歉，我花了这么长时间才开始尝试这个。我可以确认它有效！