0

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

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

<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>

4

2 回答 2

1

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

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

最后，您的onclick属性将无法使用，因为此时文档myFunction中不存在。我已将其添加为事件侦听器，addEventListener而不是使用。

虽然这“有效”，但我鼓励您改为更新 SVG 中的单个元素或添加一个类并使用 CSS 来完成，但当然不要每次都使用巨大的字符串来替换整个内容。

<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>

于 2016-09-06T17:40:54.873 回答
0

您可以简单地使用<img src="XxX"/>tag 或使用<svg>. 更多信息：W3school

于 2016-09-06T17:28:39.303 回答