我在我的 html5 页面上内联渲染 svgs。为了方便起见，我希望在每个 svg 中都有一个嵌套样式 block ，而不是使用表示属性或将所有内容移动到主样式表。
但是我现在也在用vue.js，好像有冲突。
我在尝试此操作时在浏览器控制台中收到错误消息(svg 最初出现，然后变黑)，这似乎来自 Vue 加载程序。
老实说，我不太清楚到底发生了什么。如果有人愿意解释，将不胜感激!谢谢。
最佳答案
这里有一个解决方法，在您的 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。
关于vue.js - 我可以在使用 vue.js 时在内联 svg 中使用 <style> 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45324182/