3

働く 

<g>
<foreignObject width="100%" height="100%">
<body>
<div style="width:4em;height:4em">
<object height="100%" width="100%" 
        data="icons/cloud.svg" type="image/svg+xml">


</object>
</div>
</body>
</foreignObject>
<text x="0" y="15" fill="red">I love SVG</text>
</g>

</svg>

動作していません

d3js を使用して動的に同じものを追加しようとしています。ただし、SVG 画像をロードするのではなく、単に DOM 要素構造を追加するだけです。

d3.select("body").append("svg")
.append("foreignOject").attr("height","100%").attr("width","100%")
.append("body")
.append("div").style("width","4em").style("height","4em")
.append("object").attr("height","100%").attr("width","100%")
.attr("data","icons/cloud.svg").attr("type","image/svg+xml");

あとxhtml:プレフィックスも同じ。その「オブジェクト」タグが SVG 画像をロードしていない理由がわかりません。次の SC を確認してください。 ここに画像の説明を入力

4

2 に答える 2

5

d3がxhtml名前空間に作成するように、外側のhtml要素の前にxhtml：を付ける必要があります。したがって、append（ "body"）は、たとえば、append（ "xhtml：body"）として正しく記述されます。

d3要素は親からデフォルトの名前空間を取得するため、xhtml：bodyと書くと、内部divは「div」または「xhtml：div」と書くことができます。

また、foreignObjectのスペルをforeignOjectとして間違えました。

于 2013-02-23T08:02:16.767 に答える
1

以下に示すように、「object」タグのフォールバック「img」タグを追加することで修正されました。

var svg = d3.select('body').append('svg');
svg.append('foreignObject')
  .attr('width', '100%')
  .attr('height', '100%')
  .attr('x', 0) 
 .append('xhtml:div').style('height','1100px').style('width','1100px')
.append('xhtml:object')
.attr('height','100%').attr('width','100%')
.attr('type','image/svg+xml')
.attr('data','http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg')
.append('img').attr('alt','notloaded');
于 2013-02-24T06:55:24.250 に答える