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

我在我的html5页面上渲染svgs。为了方便起见，我希望在每个SVG中都有一个嵌套的样式块，而不是使用表示属性或将所有内容移动到主样式表。在使用vue.js时，我可以在内联svg中使用<style>吗？

但我也在使用vue.js在当前时间，似乎有冲突。

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

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

来源

2017-07-26 mwal

你能显示代码的一部分导致问题> –

你可以使用v-bind：style =“...”vue，并且这个例子显示你可以在模板中使用svg https://vuejs.org/ v2/examples/svg.html – Reiner

这里有一个解决方法，在你的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。

来源

2017-10-27 00:26:06 jesal

非常感谢@jesal。非常聪明！对不起，我花了这么长时间才得以试用。我可以证实它的作品！ – mwal

@mwal Gald解决了！ – jesal

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

回答

相关问题