1

複数の SVG を水平方向に並べることは可能ですか。D3 で SVG を追加すると、前の SVG の下に追加されることがわかっています。しかし、今はページの半分に前の SVG があり、この SVG を前の SVG の下から前の SVG の右側に変換したいと考えています。2 番目の svg で transform-->translate 属性を使用しようとしましたが、機能しませんでした:

var secondSVG= d3.select("#div1").append("svg").attr("width",960).attr("transform"),"translate(500, -500)");
4

3 に答える 3

0

Chrome 24、IE10、および FF17 では、このjsFiddleは期待どおりに機能しました。キーは、スタイルシートのプロパティを設定しているようwidthですheight。

HTML:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" id="svg1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" id="svg2">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

CSS:

svg
{
  width: 190px;
  height: 190px;
}
于 2013-01-16T19:54:55.213 に答える
0

しばらく前に似たようなことをしたいと思っていましたが、最終的には 2 つの内部 g 要素を持つ 1 つの svg 要素を使用することに決め、そのうちの 1 つは右に変換されました。最終的な完成品はこちらでご覧いただけます。

于 2013-01-16T23:06:07.920 に答える