使用javascript将内联svg注入div标签

时间：2016-09-06 17:24:43

标签： javascript svg inline-svg

我正在使用电子商务平台，无法安装d3或其他svg库。出于安全原因，该网站不允许我操纵具有外部来源的iframe，而且显然，所有iframe都是外部的，但无论如何。

所以我使用的是尝试将svg注入div标签。不知道为什么我的代码不会起作用。我需要附加一个svg或什么花哨的东西？它应该在按下时将圆圈变为红色。

＆＃13;
＆＃13; 
<html>
<head>
</head>
<body>
  <div id=inlinetest>
  <svg
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     width="100mm"
     height="100mm"
     viewBox="0 0 744.09448819 1052.3622047"
     id="svg2"
     version="1.1"
     inkscape:version="0.91 r13725"
     sodipodi:docname="drawing-2.svg">
    <defs
       id="defs4" />
    <sodipodi:namedview
       id="base"
       pagecolor="#ffffff"
       bordercolor="#666666"
       borderopacity="1.0"
       inkscape:pageopacity="0.0"
       inkscape:pageshadow="2"
       inkscape:zoom="0.7"
       inkscape:cx="110.88456"
       inkscape:cy="710.05401"
       inkscape:document-units="px"
       inkscape:current-layer="layer1"
       showgrid="false"
       inkscape:window-width="250"
       inkscape:window-height="250"
       inkscape:window-x="-8"
       inkscape:window-y="-8"
       inkscape:window-maximized="1" />
    <metadata
       id="metadata7">
      <rdf:RDF>
        <cc:Work
           rdf:about="">
          <dc:format>image/svg+xml</dc:format>
          <dc:type
             rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          <dc:title></dc:title>
        </cc:Work>
      </rdf:RDF>
    </metadata>
    <g
       inkscape:label="Layer 1"
       inkscape:groupmode="layer"
       id="layer1">
      <circle
         style="fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
         id="path3336"
         cx="131.42857"
         cy="129.50507"
         r="131.42857" />
    </g>
  </svg>
</div>
<div>
<button onclick="myFunction()">Click me</button>
</div>


</body>
<script>
function myFunction() {
document.getElementById('inlinetest').innerHTML = "<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="100mm"
   height="100mm"
   viewBox="0 0 744.09448819 1052.3622047"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="drawing-2.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="110.88456"
     inkscape:cy="710.05401"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="250"
     inkscape:window-height="250"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <circle
       style="fill:none;stroke:#FF0000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
       id="path3336"
       cx="131.42857"
       cy="129.50507"
       r="131.42857" />
  </g>
</svg>";
}

</script>


</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

在这里结合问题。首先，我要提到你如何做到这一点是非常不可取的。使用innerHTML用字符串替换整个SVG元素，而不是仅使用onclick属性修改SVG中的单个属性，将字符串分解为所有这些行。很多都可能出错。

首先，要使代码至少正常运行，您需要转义字符串赋值中的所有换行符。这可以通过将\添加到打破字符串的每一行的末尾来完成。不幸的是，你还使用双引号括起字符串，同时在你的字符串中有双引号。你也需要逃避这些。

最后，您的onclick财产无法正常运作，因为在文档中的那一点，myFunction并不存在。我已使用addEventListener将其添加为事件监听器。

虽然这＆＃34;工作＆＃34;，但我鼓励你改为更新SVG中的各个元素或添加一个类并使用CSS来完成它，但当然不能替换整个事物。时间用一个巨大的字符串来做到这一点。

＆＃13;
＆＃13; 
<html>
<head>
</head>
<body>
  <div id=inlinetest>
  <svg
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     width="100mm"
     height="100mm"
     viewBox="0 0 744.09448819 1052.3622047"
     id="svg2"
     version="1.1"
     inkscape:version="0.91 r13725"
     sodipodi:docname="drawing-2.svg">
    <defs
       id="defs4" />
    <sodipodi:namedview
       id="base"
       pagecolor="#ffffff"
       bordercolor="#666666"
       borderopacity="1.0"
       inkscape:pageopacity="0.0"
       inkscape:pageshadow="2"
       inkscape:zoom="0.7"
       inkscape:cx="110.88456"
       inkscape:cy="710.05401"
       inkscape:document-units="px"
       inkscape:current-layer="layer1"
       showgrid="false"
       inkscape:window-width="250"
       inkscape:window-height="250"
       inkscape:window-x="-8"
       inkscape:window-y="-8"
       inkscape:window-maximized="1" />
    <metadata
       id="metadata7">
      <rdf:RDF>
        <cc:Work
           rdf:about="">
          <dc:format>image/svg+xml</dc:format>
          <dc:type
             rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          <dc:title></dc:title>
        </cc:Work>
      </rdf:RDF>
    </metadata>
    <g
       inkscape:label="Layer 1"
       inkscape:groupmode="layer"
       id="layer1">
      <circle
         style="fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
         id="path3336"
         cx="131.42857"
         cy="129.50507"
         r="131.42857" />
    </g>
  </svg>
</div>
<div>
<button id="myButton">Click me</button>
</div>


</body>
<script>
document.getElementById('myButton').addEventListener('click', function() {
document.getElementById('inlinetest').innerHTML = "<svg\
   xmlns:dc=\"http://purl.org/dc/elements/1.1/\"\
   xmlns:cc=\"http://creativecommons.org/ns#\"\
   xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\
   xmlns:svg=\"http://www.w3.org/2000/svg\"\
   xmlns=\"http://www.w3.org/2000/svg\"\
   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"\
   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\
   width=\"100mm\"\
   height=\"100mm\"\
   viewBox=\"0 0 744.09448819 1052.3622047\"\
   id=\"svg2\"\
   version=\"1.1\"\
   inkscape:version=\"0.91 r13725\"\
   sodipodi:docname=\"drawing-2.svg\">\
  <defs\
     id=\"defs4\" />\
  <sodipodi:namedview\
     id=\"base\"\
     pagecolor=\"#ffffff\"\
     bordercolor=\"#666666\"\
     borderopacity=\"1.0\"\
     inkscape:pageopacity=\"0.0\"\
     inkscape:pageshadow=\"2\"\
     inkscape:zoom=\"0.7\"\
     inkscape:cx=\"110.88456\"\
     inkscape:cy=\"710.05401\"\
     inkscape:document-units=\"px\"\
     inkscape:current-layer=\"layer1\"\
     showgrid=\"false\"\
     inkscape:window-width=\"250\"\
     inkscape:window-height=\"250\"\
     inkscape:window-x=\"-8\"\
     inkscape:window-y=\"-8\"\
     inkscape:window-maximized=\"1\" />\
  <metadata\
     id=\"metadata7\">\
    <rdf:RDF>\
      <cc:Work\
         rdf:about=\"\">\
        <dc:format>image/svg+xml</dc:format>\
        <dc:type\
           rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />\
        <dc:title></dc:title>\
      </cc:Work>\
    </rdf:RDF>\
  </metadata>\
  <g\
     inkscape:label=\"Layer 1\"\
     inkscape:groupmode=\"layer\"\
     id=\"layer1\">\
    <circle\
       style=\"fill:none;stroke:#FF0000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none\"\
       id=\"path3336\"\
       cx=\"131.42857\"\
       cy=\"129.50507\"\
       r=\"131.42857\" />\
  </g>\
</svg>";
});

</script>


</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您只需使用<img src="XxX"/>代码或使用<svg>即可。更多信息：W3school

相关问题
最新问题