使用javascript將內嵌svg注入div標簽
[英]Inject inline svg into div tag with javascript
問題描述
我正在使用電子商務平台，無法安裝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>
2 個解決方案
解決方案1
1 已采納 2016-09-06 17:40:54
這里有幾個問題。 首先，我要提一下您如何做到這一點是極不可取的。 使用innerHTML用字符串替換整個SVG元素，而不僅僅是使用onclick屬性修改SVG中的單個屬性，將字符串分成所有這些行。 很多事情都會出錯。
首先，要使代碼至少能夠正常運行，您需要對字符串分配中的所有換行符進行轉義。 可以通過在每個中斷字符串的末尾添加\\來實現。 不幸的是，您還使用雙引號將字符串括起來，同時在字符串中使用雙引號。 您也需要逃避這些。
最后，您的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>
解決方案2
0 2016-09-06 17:28:39
您可以簡單地使用<img src="XxX"/>標記或使用<svg> 。 更多信息在這里： W3school
以div標簽內容並將其應用於javascript中的內聯樣式
[英]Taking div tag content and applying it to inline style in javascript
JavaScript可與內聯svg一起使用，但不能與外部鏈接的svg一起使用？
[英]JavaScript works with inline svg but not with external linked svg?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.