水平相邻的两个svgs

是否可以有多个水平相邻的SVG。我知道当你在D3中附加一个SVG时，它会附加在以前的SVG下面。但是现在我已经在上一页的SVG之前，我想将这个SVG从前一个SVG的下面翻译到之前的SVG的右侧。我尝试使用变换 - 第二SVG>翻译属性，但它没有工作：水平相邻的两个svgs

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

来源

2013-01-16 user1943827

如果这是你的实际代码，那么最终会有一个拼写错误，在''transform''后面有一个''''。 – Sirko

哦，只是忽略了这一点。我没有复制和粘贴。在本网站上手动输入代码时，我犯了一个错误。这不是我无法工作的原因。 – user1943827

在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-16 19:54:55

严。你能不能想到一个特殊的原因，如果我的两个svgs的宽度大于960，它会把第二个svg放在第一个svg的下面。但是，如果我的两个svgs的平均宽度小于或等于960，则它们会水平排列。 – user1943827

@ user1943827它很可能与浏览器窗口大小或屏幕大小有关。浏览器根据其窗口大小进行渲染。 –

一段时间回来我想要做类似的事情，但我最终与两个内部摹元素，其中一人在使用单个SVG元素入驻转化为右侧。您可以看到最终成品here。

来源

2013-01-16 23:06:07

水平相邻的两个svgs

回答

相关问题