vue.jsを使用している間にインラインsvgの中に<style>を使用できますか？

Question

私はhtml5ページでsvgsをインラインでレンダリングしています。私は、プレゼンテーション属性を使うのではなく、すべてをメインスタイルシートに移動するのではなく、便宜上、それぞれのsvgの中にネストされたスタイルブロックを入れたいと思っています。

しかし、現時点ではvue.jsも使用しており、競合が発生しているようです。

Vueのローダ​​ーからであるように思われ、これをしようとしたとき、私は、ブラウザのコンソールでエラーが発生します（とSVGは最初に表示され、その後、黒くなります）。

すべての正直なところで、私は何が起こっているか正確にはっきりしているわけではありません。誰もがそれが大いに感謝される説明したい場合！ありがとう。ここで

Answer 1

は例えば、svg:styleへstyleタグを変更する、あなたのSVGファイルで、回避策です：

<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です。