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

我正在使用电子商务平台，无法安装d3或其他svg库。出于安全原因，该网站不会让我操纵具有“外部来源”的iframe - 显然，所有iframe都是外部的，但无论如何。使用javascript将内联svg注入div标记

所以我采取的是试图注入一个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>

来源

2016-09-06 zack mcdonald

夫妇问题在这里。首先，我会提到你如何做这件事非常不明智。用一个使用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-06 17:40:54

真棒感谢的人。我很想知道如何结束\ –

中的所有行，我真的很感谢你的帮助。我研究了几天，没有人发现它是这样的。我简化了示例代码，因为正如你所说修改单个对象会好得多，但不幸的是我添加了2个完全不同的svg文件。再次非常感谢你， –

您可以简单地使用<img src="XxX"/>标签或使用<svg>。更多的信息在这里：W3school

来源

2016-09-06 17:28:39

不知道为什么有一个downvote。我不喜欢W3school的参考，但这是一个可行的方法。你只需要base64对svg进行编码（考虑到外部来源是不可行的）。 –

@josephmarikle图片不具有互动性，因此将点击圈变为红色是不可能的。 –

@RobertLongson OP的原始场景不是交互式的。每次单击该按钮时，它会吹走现有的SVG，并通过仅改变包含div的'innerHTML'创建的新SVG来完全替换它。将它编码为base64并使用'img'标签是不同的。 –

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

回答

相关问题