Kann ein background-image für ein SVG <path> Element eingestellt werden?SVG-Pfadelement mit einem Hintergrundbild füllen
Zum Beispiel, wenn ich das Element class="wall", den CSS-Stil .wall {fill: red;} funktioniert, aber .wall{background-image: url(wall.jpg)} nicht den Fall, weder .wall {background-color: red;}.
Sie können es tun, indem Sie den Hintergrund in eine Herstellung pattern:
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
Passen Sie die Breite und Höhe entsprechend Ihrem Bild, das Bezugs es dann aus dem Weg wie folgt aus:
<path d="M5,50
l0,100 l100,0 l0,-100 l-100,0
M215,100
a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
M265,50
l50,100 l-100,0 l50,-100
z"
fill="url(#img1)" />
sehr schön, funktioniert das auch mit base64-bildern? anstelle von wall.jpg etwas wie 'data: image/png; base64, iVBORw0KGgoAA' wie du es in normalem CSS tun würdest? – Christoph
@Christoph Ich weiß es nicht, versuch es und sieh zu. – robertc
@robertc Ich habe es versucht und es hat nicht funktioniert, aber ich hatte ein doppeltes Stilelement. Durch die Beseitigung funktionierte es ganz gut;) – Christoph
Die Antwort von "robertc" ist svg - und das ist ähnlich, was von d3.js Pfadcode verwendet wird. Ich habe es geschafft, dynamische Defs für d3.js Pfade zu erstellen, indem ich folgendes anwendete.
schaffte ich es durch die Definition als die folgende
chart.append("defs")
.append('pattern')
.attr('id', 'locked2')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 4)
.attr('height', 4)
.append("image")
.attr("xlink:href", "locked.png")
.attr('width', 4)
.attr('height', 4);
ist das d3.js? Wenn ja, sollten Sie es erwähnen, weil es nicht in den Frage-Tags ist – BiAiB
Nun, ich habe die Frage nicht geschrieben? Ich habe nach dem Code gesucht - diese Seite gefunden. Es passte zur Rechnung und das schien für mich zu funktionieren. –
Ich weiß, dass du die Frage nicht geschrieben hast. Der Fragesteller fragt nach Svg-Lösungen und Sie dumpen Javascript-Code. Es ist nicht einmal reines Javascript, also hast du irgendeine Art von Bibliothek benutzt. Ich vermute, dass es d3 ist.Aber wenn ein zufälliger Benutzer in Ihre Antwort kommt, ist es nicht hilfreich, weil er keine Ahnung hat, wie man es benutzt. Ich stimme das ab, bis Sie es ausgearbeitet haben. – BiAiB
arbeiten zu erhalten, wenn Ihr svg einzelne Farbe ist, ist der beste Weg, SVGs Konvertierung von Dateien Schriftart.
Sie können das Werkzeug icomoon.io verwenden, um alle Ihre SVGs in Schriftartdateien zu fassen und sie als Zeichensatzklassen zu verwenden, wie Fontawesome.
Das scheint die ursprüngliche Frage überhaupt nicht zu beantworten. –
Zeigt, wie das Hintergrundbild für SVG-Text festgelegt wird, optional pro Zeichen: http://stackoverflow.com/a/10853878/405017 – Phrogz
für diejenigen, die mehr in tiefen Informationen suchen, finden Sie in diesem Artikel [link ] (http://vanseodesign.com/web-design/svg-pattern-attributes/) –