Chrome Problem SVG-Transformation

Ich versuche, ein Svg-Rechteck mit transfrom = translate() zu positionieren. Als ich es getestet habe, habe ich gesehen, dass es in Chrome nicht funktioniert, aber in Firefox gut funktioniert.Chrome Problem SVG-Transformation

Ich habe auch in Chrome mit -webkit- versucht, funktioniert aber auch nicht.

Im Code-Snippet können Sie sehen, was das Problem ist, wenn es mit Chrome geöffnet wird.

Hat jemand jetzt einen Workaround dafür oder mache ich etwas falsch?

<svg transform="translate(100,0)"> 
 
    <rect width="200" height="200" style="fill:blue;;stroke:black" /> 
 
</svg> 
 
<br><br> 
 
<svg style="transform:translate(100px,0)"> 
 
    <rect width="200" height="200" style="fill:blue;;stroke:black" /> 
 
</svg>

https://jsfiddle.net/suf2reee/

Quelle

2016-06-09 Simon

Ich denke, dass dies mit der MathML-Unterstützung verwandt sein kann. Wenn Sie die MDN-Dokumentationsseite des Transformationsattributs überprüfen, werden Sie gewarnt, wenn Sie CSS-Fallbacks verwenden, wie Sie hier sehen können: http://prntscr.com/be7w0z (links Firefox, rechts Chrom). Wie auch immer, wenn Sie die Transformation auf das Rechteck anstelle des Svg-Objekts anwenden, wird es wie erwartet funktionieren: https://jsfiddle.net/suf2reee/1/ – briosheje

Ich denke, das ein SVG 1.1 vs SVG 2 Thema ist. In SVG 1.1, der Version, die von Browsern im Allgemeinen unterstützt wird, war das Attribut transform für das Element <svg> nicht gültig. Es ist erlaubt in SVG 2.

Firefox haben angefangen, einige SVG 2 Funktionen zu implementieren, während Chrome nicht so weit ist.

Die einfachste Lösung ist einfach Ihre Transformation auf die <rect> setzen.

Quelle

2016-06-09 12:29:41

Ja @ Paul LeBeau, Ich hatte das ähnliche Problem und das funktioniert sehr schön. – Morey

Antwort

Verwandte Themen