Question

我一直在玩这个小提琴：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。

我尝试过使用vanilla JavaScript：

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

这不起作用

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

 svgContainer.style.left = 1000;

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

有什么想法吗？

Answer 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/

如何翻译SVG及其所有孩子

1 个答案: