动态地将SVG添加到DOM [英] Dynamically adding SVG to DOM

问题描述

我已经浏览了这个网站和互联网，我似乎无法找到一种方法，我明白使用javascript将svg添加到dom。有人可以帮我吗？ svg我想在下面添加它。

 < svg version =1.1id =Layer_1xmlns =http://www.w3.org/ 2000 / svgxmlns：xlink =http://www.w3.org/1999/xlinkx =0pxy =0pxwidth =450pxheight =450pxviewBox =0 0 450 450 style =enable-background：new 0 0 450 450; XML：空间= 保留 > 
< style type =text / css> 
 .st0 {fill：none; stroke：＃000000; stroke-miterlimit：10;} 
< / style> 
< line class =pathfill =nonestroke =＃000000x1 =0y1 =154.5x2 =450y2 =154.5/> 
< line class =pathfill =nonestroke =＃000000x1 =450y1 =304.5x2 =0y2 =304.5/> 
< line class =pathfill =nonestroke =＃000000x1 =145.5y1 =0x2 =145.5y2 =450/> 
< line class =pathfill =nonestroke =＃000000x1 =295.5y1 =450x2 =295.5y2 =0/> 
< / svg> 
  

解决方案

您可以使用SVG元素，就像使用简单的DOM一样例如，您可以使用 .html（） jQuery函数编辑它：

  $（＃mySvgContainer）。html（< svg version = \1.1 \id = \Layer_1 \xmlns = \http://www.w3.org/2000/svg\xmlns：xlink = \http://www.w3.org/1999/xlink\x = \0px \ y = \0px \width = \450px \height = \450px \viewBox = \0 0 450 450 \style = \enable-background：new 0 0 450 450; \xml：space = \preserve \>< style type = \text / css \> .st0 {fill：none; stroke：＃000000; stroke -miterlimit：10;}< / style>< line class = \path \fill = \none \stroke = \＃000000 \x1 = \ 0 \y1 = \154.5 \x2 = \450 \y2 = \154.5 \/>< line class = \path \fill = \ none \stroke = \＃000000 \x1 = 450 \y1 = \304.5 \x2 = \0 \y2 = \304.5 \/> ;< line class = \path \fill = \none \stroke = \＃000000 \x1 = \145.5 \y1 = \0 \ x2 = \145.5 \y2 = \450 \/>< line class = \path \fill = \none \stroke = \＃000000 \\ \\x1 = \295.5 \y1 = \450 \x2 = \295.5 \y2 = \0 \/>< / svg>）;  

 < script src =https：//ajax.googleapis .com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< div id =mySvgContainer>< / div>  

此外，您可以动态创建DOM SVG元素并像使用HTML元素一样附加它。

I have looked all over this site and the internet and I cant seem to find a way that I understand to add an svg to the dom using javascript. Can anyone help me please? The svg I want to add it below.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="450px" height="450px" viewBox="0 0 450 450" style="enable-background:new 0 0 450 450;" xml:space="preserve">
    <style type="text/css">
        .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
    </style>
    <line class="path" fill="none" stroke="#000000" x1="0" y1="154.5" x2="450" y2="154.5"/>
    <line class="path" fill="none" stroke="#000000" x1="450" y1="304.5" x2="0" y2="304.5"/>
    <line class="path" fill="none" stroke="#000000" x1="145.5" y1="0" x2="145.5" y2="450"/>
    <line class="path" fill="none" stroke="#000000" x1="295.5" y1="450" x2="295.5" y2="0"/>
</svg>

解决方案

You can work with SVG elements like with a simple DOM structure.

For example, you can edit it using .html() jQuery function:

$("#mySvgContainer").html("<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"450px\" height=\"450px\" viewBox=\"0 0 450 450\" style=\"enable-background:new 0 0 450 450;\" xml:space=\"preserve\"><style type=\"text/css\">.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}</style><line class=\"path\" fill=\"none\" stroke=\"#000000\" x1=\"0\" y1=\"154.5\" x2=\"450\" y2=\"154.5\"/><line class=\"path\" fill=\"none\" stroke=\"#000000\" x1=450\" y1=\"304.5\" x2=\"0\" y2=\"304.5\"/><line class=\"path\" fill=\"none\" stroke=\"#000000\" x1=\"145.5\" y1=\"0\" x2=\"145.5\" y2=\"450\"/><line class=\"path\" fill=\"none\" stroke=\"#000000\" x1=\"295.5\" y1=\"450\" x2=\"295.5\" y2=\"0\"/></svg>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySvgContainer"></div>

Also, you can dynamically create DOM SVG element and append it like you do it with HTML elements.

这篇关于动态地将SVG添加到DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！