Wie verwende ich externes SVG in HTML?

Lesezeit: 2 Minuten

Benutzer-Avatar
Abdeluahab

Ich versuche, ein HTML zu erstellen, das auf eine SVG-Datei verweist, diese SVG-Datei ist interaktiv (CSS-Hover):

  1. Wenn ich benutze <img src="algerie.svg"> Ich verliere die Interaktivität.

SVG wird als Bild angezeigt, das in eine HTML-Seite eingebettet ist

  1. Wenn ich dieses Bild in einem neuen Tab mit dem Entwicklungstool öffne, wird es interaktiv.

SVG wird im Browser geöffnet und zeigt interaktive Highlights

  1. Wenn ich verwende:

    <svg viewBox="0 0 512 512">
  <use xlink:href="algerie.svg"></use>
</svg>

Dann wird nichts angezeigt, und schlimmer noch, Chrome oder Firefox erkennen die Datei im Netzwerk-Entwicklungstool nicht.

  • Beantwortet das deine Frage? Verwende ich , oder für SVG-Dateien?

    – BuZZ-dEE

    23. März 2020 um 22:11 Uhr

    Benutzer-Avatar
    Nikita Baksalyar

    Sie sollten das Bild mit einbetten <object> Schild:

    <object data="algerie.svg" type="image/svg+xml"></object>

    Einzelheiten finden Sie in dieser Frage: Verwende ich , oder für SVG-Dateien?

    • kein Notwendigkeit für type="image/svg+xml"und es ist besser, mit verwendet zu werden width und height Attribute!

      – Ja

      8. Oktober 2017 um 8:56 Uhr

    • Angenommen, das SVG hat a <path> oder <polygon> oder <line> usw. Elemente. Kann man das einstellen fill oder stroke Eigenschaften für diese Elemente über die <object> Methode?

      – Hemant Kumar

      12. September 2018 um 7:58 Uhr

    • @HemantArora Ja, das kannst du! Sie können das Element auswählen, um sein Attribut wie das normale HTML-Element zu ändern. Außerdem können Sie auch eine Klasse an das Element binden, das Sie ändern möchten. Weitere Informationen finden Sie in diesem Artikel https://benfrain.com/selecting-svg-inside-tags-with-javascript/

      – Bis du

      10. Dezember 2018 um 1:46 Uhr

    • Sie können tatsächlich keine SVG-Elemente manipulieren, wenn sie mit CSS in ein OBJECT-Tag geladen werden, da das Objekt das SVG in seinem eigenen Dokument lädt, sodass CSS keine Reichweite darauf hat. Sie können sie jedoch mit JS bearbeiten, was keine sehr saubere Lösung ist, und Sie müssen andere Dinge tun, z. B. warten, bis das Bild geladen ist, und es dann mit JS bearbeiten. In meinen Augen keine gute Lösung.

      – Beliha

      16. September 2019 um 12:11 Uhr

    1298720cookie-checkWie verwende ich externes SVG in HTML?
    © 2023 ViResist

    This website is using cookies to improve the user-friendliness. You agree by using the website further.

    Privacy policy

    Contact - Terms and Conditions - Privacy Policy