我在我的html5頁面上渲染svgs。爲了方便起見,我希望在每個SVG中都有一個嵌套的樣式塊,而不是使用表示屬性或將所有內容移動到主樣式表。在使用vue.js時,我可以在內聯svg中使用<style>嗎?
但我也在使用vue.js在當前時間,似乎有衝突。
嘗試此操作時(和svg最初出現,然後變黑),我在瀏覽器控制檯中出現錯誤,這似乎來自Vue加載程序。
誠實地說,我並不清楚究竟發生了什麼。如果有人想解釋,將不勝感激!謝謝。
我在我的html5頁面上渲染svgs。爲了方便起見,我希望在每個SVG中都有一個嵌套的樣式塊,而不是使用表示屬性或將所有內容移動到主樣式表。在使用vue.js時,我可以在內聯svg中使用<style>嗎?
但我也在使用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。
你能顯示代碼的一部分導致問題> –
你可以使用v-bind:style =「...」vue,並且這個例子顯示你可以在模板中使用svg https://vuejs.org/ v2/examples/svg.html – Reiner