如何翻译 SVG 及其所有子项答案

【问题标题】：How to translate SVG and all its children如何翻译 SVG 及其所有子项
【发布时间】：2016-04-29 21:48:12
【问题描述】：

我一直在玩这个小提琴：https://jsfiddle.net/thatOneGuy/8k8ggpcn/4/

其中大部分不是我的代码，而是从第 330-345 行开始，我添加并尝试了将 SVG 移动一定量的能力。但这不起作用。我似乎无法弄清楚为什么。

我尝试过使用 D3。所以在开始的时候给SVG添加了mainSVGContainer的ID：

svg = d3.select("#svg1")
    .append("svg").attr('id', 'mainSVGContainer')

并用这个来翻译：

 d3.select('#mainSVGContainer').style('fill','blue').attr("transform", "translate(0 "+difference +")")

Difference 是在此调用之前计算出的整数，大约为 130。但这似乎不起作用。它被写入 DOM，但看起来并没有影响 SVG。

我尝试过使用原生 JavaScript：

var svgContainer = document.getElementById('mainSVGContainer');
 svgContainer.offsetLeft = 1000;

这个也不行

我已经尝试使用内联 JS 来改变样式：

 svgContainer.style.left = 1000;

仍然没有运气。我认为这是因为它是一个 SVG 元素，但我尝试对这个 SVG 的容器做同样的事情，它是一个 div 并且没有运气。

有什么想法吗？

【问题讨论】：

svgContainer.style.left = 1000; 确实工作，只是你还需要设置svgContainer.style.position = 'absolute';。您也可以使用style.padding 或style.margin 来完成相同的操作，而无需将position 设置为absolute。
@JSBob 为此欢呼，填充工作:) 但并没有像我希望的那样将其向上移动。你知道为什么我不能通过 D3 方式做到吗？
它确实有效，只是在 Chrome 中不行。 Firefox 能够将 transform 应用于 SVG 元素，但 Chrome 似乎不支持这一点。如果您想使用 d3 设置它，this 问题可能会有所帮助。 @thatOneGuy
难怪。我需要养成在多个浏览器中进行调试的习惯。谢谢
值得注意的是，根据规范的attribute index transform 属性不适用于svg 元素。因此，该行为不应归咎于似乎符合规范的 Chrome。 @JSBob

标签： javascript d3.js svg

【解决方案1】：

作为JSBob和其他人来自以下：

我发现 Chrome 和其他浏览器不支持 SVG 元素的翻译。因此，作为一种变通方法，我将一个 g 元素附加到 SVG 并翻译：

附加 g ：

 svg = d3.select("#svg1") 
    .append("svg").attr("height", h)
    .attr("width", w)
    .append('g')
    .attr('id', 'mainSVGContainer')
    .attr("height", h)
    .attr("width", w)
    .attr("class", "graph-svg-component")

翻译 g ：

d3.select('#mainSVGContainer').transition().duration(1000).attr("transform", "translate(0 "+(-difference) +")")

添加了过渡，以便您可以看到之前和之后:)

更新小提琴：https://jsfiddle.net/thatOneGuy/8k8ggpcn/7/

【讨论】：