SVG foreignObject wird in keinem Browser angezeigt, warum?

Ich habe ein ForeignObject in einem SVG-Element. Alle anderen Elemente werden angezeigt, aber das foreignObject ist mit seinem Inhalt nicht sichtbar. Getestet in Chrome, Firefox und Edge, alle mit dem gleichen Ergebnis. HierSVG foreignObject wird in keinem Browser angezeigt, warum?

ist der Code:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="v-2" width="100%" height="100%"> 
    <g id="v-3" class="joint-viewport" transform="matrix(1,0,0,1,-1597.0002028000001,95.99995439999998)"> 
     ... 
     <g id="j_29" model-id="e8dbd7a4-5d3d-44e5-85a0-09413112a39b" class="joint-theme-default joint-cell joint-type-html joint-type-html-element joint-element" data-type="html.Element" fill="#ffffff" stroke="none" transform="translate(1898.0001898,268.0000346)"> 
      <g class="rotatable" id="v-206"> 
       <rect class="body" id="v-207" stroke="none" fill-opacity="0" fill="#ffffff" width="100" height="60"></rect> 
       <text class="label" id="v-208" font-size="14" y="0.8em" display="none" xml:space="preserve" fill="#000000" text-anchor="middle" font-family="Arial, helvetica, sans-serif" transform="matrix(1,0,0,1,125,20)"> 
        <tspan id="v-209" class="v-line v-empty-line" dy="0em" x="0" style="fill-opacity: 0; stroke-opacity: 0;">-</tspan> 
       </text> 
       <foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" width="100%" height="100"> 
        <body xmlns="http://www.w3.org/1999/xhtml"> 
         <input xmlns="http://www.w3.org/1999/xhtml" type="text" value="I'm HTML input"> 
        </body> 
       </foreignObject> 
      </g> 
     </g> 
    </g> 
    <defs id="v-4"></defs> 
</svg>

F: Was mache ich falsch?

UPDATE: bemerkte ich ein paar Dinge:

xmlns="http://www.w3.org/1999/xhtml" mit dem Eingang Hinzufügen macht es auf Edge zeigen. In anderen Browsern ist es immer noch nicht sichtbar.
In Chrome, wenn ich das äußere <g> Element bearbeiten, indem Sie "Als HTML bearbeiten" auswählen, aber dann keine Änderungen vornehmen und den Bearbeitungsmodus verlassen, wird die Eingabe angezeigt.
Hinzufügen requiredExtensions="http://www.w3.org/1999/xhtml" zu dem foreignObject Tag und/oder das Body-Tag macht keinen Unterschied.

ich etwas fehlen darf ...

Quelle

2017-08-05 Edy Bourne

Wie erstellen Sie das? Sieht aus, als wäre es im HTML-Namespace und nicht im SVG-Namespace. BTW bitte nicht Bilder von Code, Postleitzahl als Text. –

@RobertLongson Hallo, danke für die Antwort. Ich habe den Beitrag mit dem Code aktualisiert. Es hat bewegte Blöcke, aber sie sind alle ähnlich, also habe ich sie ausgezogen und nur die problematische verlassen. –

Wenn ich die Transformationsattribute entferne (so dass das foreignObject auf dem Bildschirm ist), zeigt es OK für mich an. –

Der Trick ist requiredExtensions="http://www.w3.org/1999/xhtml aus dem foreignObject-Tag zu entfernen. Chrome zeigt keinen Inhalt an, wenn dieses Attribut vorhanden ist, aber wenn es entfernt wird, funktioniert es in Chrome, IE und Firefox.

Leider habe ich einen anderen Fehler in Chrome (wo es den Inhalt der Eingabe an einem seltsamen Ort rendert, wenn der Text überläuft), so werde ich nicht mehr foreignObjects dafür verwenden, aber nur für den Fall, dass jemand neugierig ist, so ist Ich habe das erste Problem bearbeitet.

Quelle

2017-08-14 21:33:36

SVG foreignObject wird in keinem Browser angezeigt, warum?

Antwort

Verwandte Themen