Wie SVG und alle seine Kinder übersetzen

ich mit dieser Geige gespielt haben: https://jsfiddle.net/thatOneGuy/8k8ggpcn/4/Wie SVG und alle seine Kinder übersetzen

Mehrheit der es nicht mein Code ist, aber von der Linie 330-345 ich hinzugefügt haben, versucht, die Fähigkeit, zu bewegen, die SVG um einen bestimmten Betrag. Aber das funktioniert nicht. Ich kann nicht herausfinden, warum.

Ich habe versucht, mit D3. So fügte eine ID von mainSVGContainer zum SVG zu Beginn:

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

und verwendet, um dieses zu übersetzen:

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

Difference eine ganze Zahl vor diesem Aufruf ausgearbeitet, seine um 130 Aber dieses doesn Es scheint nicht zu funktionieren. Es wird in das DOM geschrieben, aber es sieht nicht so aus, als ob es das SVG beeinflusst.

Ich habe mit Vanille JavaScript versucht:

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

Das funktioniert nicht, entweder

Und ich habe mit Inline JS versucht, das Styling zu ändern:

svgContainer.style.left = 1000;

Noch kein Glück . Ich vermutete, dass es daran lag, dass es ein SVG-Element war, aber ich habe versucht, dasselbe mit dem Container dieser SVG zu machen, was ein div war und kein Glück.

Irgendwelche Ideen?

Quelle

2016-04-29 thatOneGuy

'svgContainer.style.left = 1000;' funktioniert *, es ist nur, dass Sie auch 'svgContainer.style.position = 'absolute';' set haben müssen. Sie können auch 'style.padding' oder' style.margin' verwenden, um dasselbe zu erreichen, ohne 'position' auf' absolute' setzen zu müssen. – JSBob

@JSBob Prost für das, die Polsterung funktioniert :) Aber bewegt es nicht so, wie ich es tun möchte. Weißt du, warum ich es nicht über die D3-Art machen kann? – thatOneGuy

Es funktioniert, nur nicht in Chrome. [Firefox] (https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform) hat die Fähigkeit, eine Transformation auf SVG-Elemente anzuwenden, aber es scheint, dass Chrome dies nicht unterstützt.Wenn Sie es mit d3 einstellen möchten, könnte [this] (http://stackoverflow.com/questions/27283610/d3-workaround-for-svg-transform-in-chrome) Frage helfen. @ thatOneGuy – JSBob

Als JSBob und andere der folgenden Optionen:

ich Chrome fand heraus, zusammen mit anderen Browsern, unterstützen nicht die Übersetzung von SVG-Elemente. So, wie eine Arbeit um, ich angehängt ein g Element zur SVG und übersetzt, dass:

Anfügen 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")

Translating g:

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

Added den Übergang, so dass Sie sehen können, vorher und nachher :)

Aktualisierte Geige: https://jsfiddle.net/thatOneGuy/8k8ggpcn/7/

Quelle

2016-04-29 13:47:41 thatOneGuy

Wie SVG und alle seine Kinder übersetzen

Antwort

Verwandte Themen