使用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標記

回答

相關問題