两个水平相邻的svgs

时间:2013-01-16 19:32:00

标签: javascript html d3.js

是否可以在水平方向上拥有多个彼此相邻的SVG。我知道当你在D3中附加一个SVG时,它会附加在上一个SVG之下。但是现在我在页面的一半上有了以前的SVG,我想将这个SVG从之前的SVG下面转换到上一个SVG的右边。我尝试在第二个svg上使用transform - > translate属性,但它不起作用:

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

3 个答案:

答案 0 :(得分:0)

在Chrome 24,IE10和FF17中,此jsFiddle按预期工作。关键似乎是设置widthheight样式表属性。

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;
}

答案 1 :(得分:0)

一段时间后我想做类似的事情,但最终我决定使用一个带有两个内部g元素的单个svg元素,其中一个元素转换为右边。您可以看到最终的成品here

答案 2 :(得分:0)

一般想法:将每个SVG包装在显示为内联块的div元素中。 这适用于我个人喜欢的以下方法。

最小例子:

<div style="display: inline-block; width: 42%">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-80 -45 160 90" preserveAspectRatio="xMinYMin meet">
<circle cx="0" cy="0" r="39">
</svg>
</div>
<!-- Just a copy from above. Right of (not below) the previous SVG. -->
<div style="display: inline-block; width: 42%">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-80 -45 160 90" preserveAspectRatio="xMinYMin meet">
<circle cx="0" cy="0" r="39">
</svg>
</div>