使用 javascript 将内联 svg 注入 div 标签
Inject inline svg into div tag with javascript
我正在使用电子商务平台,无法安装 d3 或其他 svg 库。出于安全原因,该站点不允许我操作具有 "external sources" 的 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>
您可以简单地使用 <img src="XxX"/>
标签或使用 <svg>
。更多信息在这里:W3school
这里有几个问题。首先,我会提到你这样做是非常不可取的。使用 innerHTML 将整个 SVG 元素替换为字符串,而不是仅修改 SVG 中的单个 属性,使用 onclick 属性,将字符串分解为所有这些行。很多事情都可能出错。
首先,为了让您的代码至少正常运行,您需要转义字符串分配中的所有换行符。这可以通过将 \
添加到中断字符串的每一行的末尾来完成。不幸的是,您还使用双引号将字符串括起来,同时在字符串中使用双引号。你也需要逃避那些。
最后,您的 onclick
属性 将不起作用,因为此时在文档中 myFunction
不存在。我使用 addEventListener
将其添加为事件侦听器。
尽管如此 "works",但我鼓励您改为更新 SVG 中的各个元素或添加 class 并使用 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>
我正在使用电子商务平台,无法安装 d3 或其他 svg 库。出于安全原因,该站点不允许我操作具有 "external sources" 的 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>
您可以简单地使用 <img src="XxX"/>
标签或使用 <svg>
。更多信息在这里:W3school
这里有几个问题。首先,我会提到你这样做是非常不可取的。使用 innerHTML 将整个 SVG 元素替换为字符串,而不是仅修改 SVG 中的单个 属性,使用 onclick 属性,将字符串分解为所有这些行。很多事情都可能出错。
首先,为了让您的代码至少正常运行,您需要转义字符串分配中的所有换行符。这可以通过将 \
添加到中断字符串的每一行的末尾来完成。不幸的是,您还使用双引号将字符串括起来,同时在字符串中使用双引号。你也需要逃避那些。
最后,您的 onclick
属性 将不起作用,因为此时在文档中 myFunction
不存在。我使用 addEventListener
将其添加为事件侦听器。
尽管如此 "works",但我鼓励您改为更新 SVG 中的各个元素或添加 class 并使用 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>