[英]SVG injection with template literals doesn't work in browser
我的想法是使用模板文字將內聯SVG注入HTML。 目的只是利用使用CSS樣式化內聯SVG圖標的好處，而避免使用SVG東西使HTML代碼膨脹。 通過添加相應的類，也很容易重用重復的圖標。 此外，所有圖標或徽標之類的矢量內容都可以存儲在單個JS文件中。 我知道，這是個古怪的主意，但我發現它對我的項目很有用。
因此，問題在於我的腳本無法從本地文件在瀏覽器中運行 。 但是它在CodePen和JSFiddle中運行良好。 禁用本地文件限制，啟用JS。
也歡迎任何關於如何優化它並使它更好地工作的想法。
var iconLogo = document.querySelectorAll(".ric-logo"); var i; for (i = 0; i < iconLogo.length; i++) { iconLogo[i].innerHTML = ` <svg width="120px" height="18px" viewBox="0 0 120 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="ric-logo" stroke="none" stroke-width="1" fill="black" fill-rule="evenodd"> <path d="M23.326087,0 C23.2252174,0 23.1275,0 23.0266304,0 L23.0266304,0 L2.52173913,0 C1.12902107,-8.82200545e-17 1.70558772e-16,1.16795283 0,2.60869565 L0,15 L5.04347826,15 L5.04347826,5.2173913 C5.04347826,4.8572056 5.32573353,4.56521739 5.67391304,4.56521739 L22.9730435,4.56521739 C23.631932,4.55997742 24.1901947,5.0660023 24.2717391,5.7423913 C24.306535,6.10977596 24.1892199,6.47520901 23.948885,6.74807191 C23.7085502,7.02093481 23.3677046,7.17567223 23.0108696,7.17391304 L7.56521739,7.17391304 L7.56521739,11.7391304 L23.0266304,11.7391304 L23.0266304,11.7391304 C23.1275,11.7391304 23.2252174,11.7391304 23.326087,11.7391304 C26.4597026,11.7391304 29,9.11123658 29,5.86956522 C29,2.62789386 26.4597026,1.98495123e-16 23.326087,0 Z" id="Path"></path> <path d="M64.9565217,1.21154527e-06 L61.173913,1.21154527e-06 C60.170401,-0.000815107822 59.2077021,0.410915432 58.4977174,1.14456624 L49.8796739,10.0532605 C49.6430123,10.2978107 49.3221127,10.4350542 48.9876087,10.4347821 L46.673913,10.4347821 C46.3257335,10.4347821 46.0434783,10.142794 46.0434783,9.78260833 L46.0434783,1.21154527e-06 L41,0 L41,12.3913036 C41,13.8320462 42.1290211,14.9999988 43.5217391,14.9999988 L49.826087,14.9999988 C50.829599,15.0008151 51.7922979,14.5890846 52.5022826,13.8554338 L61.1108696,4.95000041 C61.3493224,4.70184137 61.674158,4.56319679 62.0123913,4.56521787 L64.326087,4.56521787 C64.6742665,4.56521787 64.9565217,4.85720602 64.9565217,5.21739167 L64.9565217,14.9999988 L70,15 L70,2.60869644 C70,1.16795385 68.8709789,1.21154527e-06 67.4782609,1.21154527e-06 L64.9565217,1.21154527e-06 Z" id="Path"></path> <path d="M114,10 L120,10 L120,16 C120,17.1045695 118.992641,18 117.75,18 L114,18 L114,10 Z" id="Path"></path> <path d="M106,0 L106,9.7826087 C106,10.1427944 105.720178,10.4347826 105.375,10.4347826 L87.625,10.4347826 C87.279822,10.4347826 87,10.1427944 87,9.7826087 L87,0 L82,0 L82,12.3913043 C82,13.8320472 83.1192881,15 84.5,15 L108.5,15 C109.880712,15 111,13.8320472 111,12.3913043 L111,0 L106,0 Z" id="Path"></path> </g> </svg> `; }
/* Styling all instances of SVG */ .ric-logo * { fill: blue; width: 120px; height: 15px; };
<body> <header class="header-menu"> <div class="ric-logo"> </div> <div class="menu-content"> <ul> <li><a href="#"></a>Item-1</li> <li><a href="#"></a>Item-2</li> <li><a href="#"></a>Item-3</li> <li><a href="#"></a>Item-4</li> </ul> </div> </header> <main> <!-- Test repeating SVG class --> <div class="ric-logo"> </div> </main> <footer></footer> </body>
我不確定您的文件結構如何，因此可能無法正確重現您的問題。 讓我知道我是否做過任何錯誤的假設。
首先，Stack Overflow上的代碼筆和代碼片段自動包含CSS和JS，而本地文件則不包含。 如果還沒有，則需要包含包含CSS和js的相應<script>和<style>標記。
如果您已經這樣做了，並且出於這個問題的目的剛剛將它們進行了編輯，那么另一個可能的問題是，您提供的javascript已包含在頁面頂部。 document.querySelectorAll(".ric-logo")在頁面加載之前不起作用，如果將提供的javascript放在頁面頂部，它將在頁面加載完成之前運行。 解決此問題的最簡單方法是將javascript放在頁面底部。
如果由於某種原因您不想在頁面底部使用JavaScript，則需要jQuery的$(document).ready ，或者該問題的替代品之一。
@Nicholas是正確的，問題是在加載所有DOM內容之前， document.querySelectorAll無法正常工作。 因此，一種解決方案是將document.querySelectorAll放置在頁面底部。 另一個是使用在頁面加載時運行腳本的功能。 在這里解釋。
我將其應用於腳本，並且效果很好。 因此，如果您有興趣，請在此處發布摘要。 對於使用字符串文字進行模板化或像在我的情況下動態注入Inline SVG那樣可能會有所幫助。
// Icons SVG injection // Function that run code when DOM is loaded function ready(callback){ // in case the document is already rendered if (document.readyState!='loading') callback(); // modern browsers else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback); // IE <= 8 else document.attachEvent('onreadystatechange', function(){ if (document.readyState=='complete') callback(); }); } ready(function(){ // All inside tht function executes when DOM is loaded // Logo SVG var mySvg = document.querySelectorAll(".my-svg"); var i; for (i = 0; i < mySvg.length; i++) { mySvg[i].innerHTML = ` <svg width="188px" height="188px" viewBox="0 0 188 188" version="1.1"> <circle id="Oval" fill="#FC4903" cx="94" cy="94" r="94"></circle> </svg> ` }; });
/* styling svg */ .my-svg * { fill: red; width: 200px; height: 200px; };
<!-- creating container where you like to insert SVG --> <div class="my-svg"> <div></div> </div>
Webpack 和 HtmlWebpackPlugin：將塊注入自定義模板不起作用
[英]Webpack & HtmlWebpackPlugin: Injection of chunks into custom template doesn't work
如果我使用模板文字在 React 中切換 CSS 類，按鈕將不起作用
[英]Button doesn't work if I use template literals to toggle CSS classes in React
為什么JavaScript的.call函數不能與對象文字一起使用？
[英]Why doesn't JavaScript's .call function work with object literals?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.