带有模板文字的SVG注入在浏览器中不起作用
[英]SVG injection with template literals doesn't work in browser
问题描述
My idea is to inject inline SVG to my HTML using template literals. 
我的想法是使用模板文字将内联SVG注入HTML。 The purpose is simply use benefits of styling inline SVG icons with CSS but avoid bloating html code with SVG stuff. 目的只是利用使用CSS样式化内联SVG图标的好处，而避免使用SVG东西使HTML代码膨胀。 Also it's very easy to reuse repeating icons by just adding corresponding class. 通过添加相应的类，也很容易重用重复的图标。 Also all icons or vector stuff like logo can be stored in single JS file. 此外，所有图标或徽标之类的矢量内容都可以存储在单个JS文件中。 I know, that's hacky weird idea, but I found it's useful for my project. 我知道，这是个古怪的主意，但我发现它对我的项目很有用。
So the problem is that my script won't work in browser from my local files. 因此，问题在于我的脚本无法从本地文件在浏览器中运行 。 But it works well in CodePen and JSFiddle. 但是它在CodePen和JSFiddle中运行良好。 Local file restrictions are disabled, JS is enabled. 禁用本地文件限制，启用JS。
Also any ideas how to optimize it and make it work better are welcome. 也欢迎任何关于如何优化它并使它更好地工作的想法。
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>
2 个解决方案
解决方案1
0 2019-03-08 20:28:34
I'm not sure how you've structured your files, so I might not be reproducing your problems correctly. 我不确定您的文件结构如何，因此可能无法正确重现您的问题。 Let me know if I've made any false assumptions. 让我知道我是否做过任何错误的假设。
Firstly, codepen and the snippets on Stack Overflow automatically include CSS and JS, while local files do not. 首先，Stack Overflow上的代码笔和代码片段自动包含CSS和JS，而本地文件则不包含。 If you haven't already, you need to include appropriate <script> and <style> tags containing your css and your js. 如果还没有，则需要包含包含CSS和js的相应<script>和<style>标记。
If you are already doing that and you've just edited them out for the purposes of this question, then another possible problem is that the javascript you've provided you've included at the top of your page. 如果您已经这样做了，并且出于这个问题的目的刚刚将它们进行了编辑，那么另一个可能的问题是，您提供的javascript已包含在页面顶部。 document.querySelectorAll(".ric-logo") won't work until the page has been loaded, and if you put the javascript you've supplied at the top of your page, it will run before the page has finished loading. document.querySelectorAll(".ric-logo")在页面加载之前不起作用，如果将提供的javascript放在页面顶部，它将在页面加载完成之前运行。 The easiest way to fix this is to put the javascript at the bottom of your page. 解决此问题的最简单方法是将javascript放在页面底部。
If for some reason you don't want your javascript at the bottom of your page, you need something like jQuery 's $(document).ready , or one of the vanilla alternatives from this question . 如果由于某种原因您不想在页面底部使用JavaScript，则需要jQuery的$(document).ready ，或者该问题的替代品之一。
解决方案2
0 2019-03-08 21:40:43
@Nicholas was right, and the problem was that document.querySelectorAll not working until all the DOM stuff loaded. @Nicholas是正确的，问题是在加载所有DOM内容之前， document.querySelectorAll无法正常工作。 So one solution is to place document.querySelectorAll to the bottom of the page. 因此，一种解决方案是将document.querySelectorAll放置在页面底部。 Another is to use function that run your scripts when pages is loaded. 另一个是使用在页面加载时运行脚本的功能。 It's explained here . 在这里解释。
I applied it to my script and it works well. 我将其应用于脚本，并且效果很好。 So if you interested I post the snipped here. 因此，如果您有兴趣，请在此处发布摘要。 It may be helpful for templating using string literals or like in my case dynamically inject Inline SVG. 对于使用字符串文字进行模板化或像在我的情况下动态注入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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.