Javascript 如何从嵌入的外部svg文件初始化d3 svg元素并对其进行操作
svg文档作为文件嵌入 svg文件:Javascript 如何从嵌入的外部svg文件初始化d3 svg元素并对其进行操作,javascript,d3.js,svg,embed,Javascript,D3.js,Svg,Embed,svg文档作为文件嵌入 svg文件: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xm
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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="64px"
height="64px"
id="svgPic"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="New document 18">
<g
id="curvLayer"
inkscape:label="Curv"
inkscape:groupmode="layer">
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 2.0162099,44.937652 C 19.928085,44.362124 23.033712,29.671999 33.839655,29.657316 44.913406,29.332988 44.178722,15.232728 60.486296,15.244392"
id="path4373"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
</g>
</svg>
这里是带javascript的html,我尝试用d3操作svg。但是没有成功
<body>
<embed src="berg4.svg" type="image/svg+xml" id="svgpic"/>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" charset="utf-8">
var subdoc = document.getElementById("svgPic").getSVGDocument();
var curvLayer = subdoc.getElementById("curvLayer");
var myPoint = d3.select("#curvLayer").append("svg:circle")
.attr("cx", x) //e.g. x = 100
.attr("cy", y) //e.g. y = 100
.attr("r", 4.5);
</script>
</body>
var subdoc=document.getElementById(“svgPic”).getSVGDocument();
var curvLayer=subdoc.getElementById(“curvLayer”);
var myPoint=d3.选择(#curvLayer”).追加(“svg:circle”)
.attr(“cx”,x)//例如x=100
.attr(“cy”,y)//例如y=100
.attr(“r”,4.5);
问题是,如何向这个svg添加一个新的元素,如circle?我发现您的代码存在两个问题:
document.getElementByID
和D3。选择,这是不必要的-您可以使用以下命令选择只有D3的元素:
cx
和cy
属性:您正在将附加的圆cx
和cy
属性设置为“x”和“y”,但这些属性之前未在代码中定义。尝试设置为静态值或定义x和y之前:
.append("circle")
.attr("cx", 10)
.attr("cy", 10)
.attr("r", 4.5);
jsfiddle进行了以下更新:诀窍是需要为D3提供外部svg的根元素。对于您的示例,可以这样做:
var svgRoot = document.getElementById('svgpic').getSVGDocument().documentElement;
d3.select(svgRoot).select("#curvLayer").append("circle")
.attr("cx", 10)
.attr("cy", 10)
.attr("r", 4.5);
显然,对于Firefox,您可能需要使用
contentDocument
而不是getSVGDocument()
这里的主要问题是,svg是一个外部文件。因此,我无法简单地使用d3访问id。选择(“#curvLayer”)
I升级问题以避免相同的问题。这可能会有帮助:
var svgRoot = document.getElementById('svgpic').getSVGDocument().documentElement;
d3.select(svgRoot).select("#curvLayer").append("circle")
.attr("cx", 10)
.attr("cy", 10)
.attr("r", 4.5);