Mit einem .svg-Datei in HTML-Code aus einem URL?
Ich bin versucht, ein svg von einer externen Quelle in meinem html. Sagen wir, ich habe dieses svg:
https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg
Fand ich viele Möglichkeiten, dies zu tun, einschließlich:
<img src="your.svg"/>
<object data="your.svg"/>
<iframe src="your.svg"/>
<embed src="your.svg"/>
<div style="background:url(your.svg)">...</div>
Aber leider, das styling, die ich habe zu nutzen gilt, um svg-tags. Wenn ich dieses zum Beispiel:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg"/>
</svg>
Wird es nicht zeigen, bis auf meine Seite, bekomme ich nur eine leere weiße Quadrat! Gibt es trotzdem kann ich dazu in svg-tags? Danke!
Warum tun Sie Ihre Stile gelten nur für die svg-tags?
Leider, ich arbeite in einem multi-team-Umfeld. Ich habe die Verwendung der bereitgestellten styling, oder ich werde Kontakt mit dem Verantwortlichen und Fragen Sie Sie, es zu ändern, und das könnte eine lange Zeit dauern.
tatsächliche Produktionsumgebung, wo bestimmte Stile, die angewendet werden, um die html-Elemente direkt? interessant. Sie können werfen Sie einen Blick auf meine Antwort. vielleicht hilft es ja.
Leider, ich arbeite in einem multi-team-Umfeld. Ich habe die Verwendung der bereitgestellten styling, oder ich werde Kontakt mit dem Verantwortlichen und Fragen Sie Sie, es zu ändern, und das könnte eine lange Zeit dauern.
tatsächliche Produktionsumgebung, wo bestimmte Stile, die angewendet werden, um die html-Elemente direkt? interessant. Sie können werfen Sie einen Blick auf meine Antwort. vielleicht hilft es ja.
InformationsquelleAutor Albraa | 2015-12-04
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie geben Sie eine Breite und Höhe für das svg korrekt angezeigt werden:
Update
Können Sie dies über CSS natürlich auch, aber Sie müssen sicher sein, dass Ihre
<image>
tag hat die Breite und Höhe einstellen, in der CSS, wenn Sie nicht geben Sie die html-Attribute direkt:Dieser wird die Größe des eigentlichen Bildes (svg)
100px * 100px
, hat aber eine "wrapper" von150px
. In Bezug auf Ihren Kommentar auf deine ursprüngliche Frage, vielleicht ist das, warum Sie nicht sehen, Ihr Bild, weil Sie nicht haben eine Breite /Höhe und nur Stile, die für Ihre Verpackung-element (<svg>
)Beispiel Geige: https://jsfiddle.net/7334vrmq/
Hoffe, das hilft.
Die mitgelieferte styling ist so: svg - {width: 20px; height: 30px; display: block; position: absolute; left: 0; top: 20px; }
naja, aber dies hat keine Auswirkungen auf die
<image/>
überhaupt, nur diesvg
element, das dient als wrapper. haben Sie immer noch geben Sie eine Breite für die<image>
.aktualisiert meine Antwort
InformationsquelleAutor lexith