Internet Explorer 10 berücksichtigt SVG-Text dominant-Baseline-Attribut nicht?

Question

Die folgende SVG-Datei:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="400" height="400"> 
    <g transform="translate(200, 200)"> 
     <text text-anchor="middle" dominant-baseline="text-after-edge">Why don't I move?</text> 
    </g> 
</svg> 

Renders genau das gleiche in Internet Explorer 10.0, wenn ich die text ‚s dominant-baseline Attribut text-before-edge ändern.

In Chrome 38.0 bewegt es sich wie erwartet.

This demo page soll alle anderen dominant-baseline Einstellungen veranschaulichen. Es funktioniert auch in Chrome, aber alle Textblöcke werden in IE an derselben Y-Position angezeigt.

Allerdings, this Microsoft documentation macht es aussehen wie auch IE 9 unterstützt das Attribut.

Gibt es noch etwas anderes an meiner SVG-Datei (und der Demo-Datei), die IE zum Würgen bringt, oder muss ich das manuell mit meinem Layout machen?

Ich generiere Dateien in absoluten Koordinaten, so dass es kein großes Problem ist, wenn ich aufhören muss, diese Grundlinieneigenschaft zu verwenden und den Ausgleich selbst vorzunehmen.

Answer 1

dominant-baseline ist nicht unterstützt von Internet Explorer 9, 10, 11 und Edge (beta) nach this Microsoft documentation. Ihre einzige Option besteht darin, die Position manuell unter Verwendung von dy zu positionieren.

Answer 2

Da Rockpiper geantwortet hat, wird es im IE und in Edge im Moment nicht unterstützt. Es gibt jedoch Problemumgehungen.

Ein Konzept wäre die Berechnung des Unterschieds zwischen dem Offset zum übergeordneten Element des umgebenden Client-Rechtecks ​​(getBoundingClientRect) und dem Attribut y (das hauptsächlich für die Positionierung verwendet wird).

Dann können Sie dy für die Anpassung der vertikalen Ausrichtung einstellen.

var parentElem = mySvg; // Set it to the closest SVG (or G) parent tag 

var y = myText.hasAttribute('y') ? myText.getAttribute('y') : 0; 
var dy = myText.hasAttribute('dy') ? myText.getAttribute('dy') : 0; 

dy += y - (myText.getBoundingClientRect().top - parentElem.getBoundingClientRect().top); 

// This would cause to align it similarly to CSS 'vertical-align: top' 
myText.setAttribute('dy', dy); 

Je nach Bedarf können Sie myText.getBoundingClientRect().height zur Erzielung einer anderen vertikalen Ausrichtung subtrahieren.