1

是否可以有多个水平相邻的 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)");
4

3 回答 3

0

不久前我想做类似的事情,但我最终决定使用一个带有两个内部 g 元素的单个 svg 元素,其中一个转换到右侧。你可以在这里看到最终的成品。

于 2013-01-16T23:06:07.920 回答
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;
}
于 2013-01-16T19:54:55.213 回答
0

总体思路:将每个 SVG 包装在一个显示为 inline-block 的 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>
于 2018-05-15T13:00:37.777 回答