水平相鄰的兩個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

回答

相關問題