Wypełnij element ścieżki SVG obrazem tła

126

Czy można ustawić element background-image dla elementu SVG <path>?Wypełnij element ścieżki SVG obrazem tła

Na przykład, jeśli mogę ustawić element class="wall", styl CSS .wall {fill: red;} działa, ale .wall{background-image: url(wall.jpg)} nie, ani .wall {background-color: red;}.

Źródło

2010-09-25 jbochi

Pokazuje, jak ustawić obraz tła dla tekstu SVG, opcjonalnie na podstawie pojedynczego znaku: http://stackoverflow.com/a/10853878/405017 – Phrogz

dla tych, którzy szukają czegoś więcej w głębokiej informacji, sprawdź ten artykuł [link ] (http://vanseodesign.com/web-design/svg-pattern-attributes/) –

200

Można to zrobić poprzez tło do 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>

Dostosuj szerokość i wysokość w zależności od obrazu, a następnie odwołać go ze ścieżki jak ta:

<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)" />

Working example

Źródło

2010-09-26 16:45:44 robertc

bardzo ładne, czy to działa również z obrazami base64? zamiast wall.jpg coś jak 'dane: image/png; base64, iVBORw0KGgoAA' jak w normalnym CSS? – Christoph

@Christoph Nie wiem, spróbuj i zobacz. – robertc

@robertc Próbowałem i to nie działało, ale miałem zduplikowany element stylu. Wyeliminowanie go sprawdziło się dobrze;) – Christoph

Odpowiedz przez "robertc" to svg - i jest podobne do tego, którego używa kod ścieżki d3.js. Udało mi się utworzyć dynamiczne def na ścieżki d3.js, stosując następujące.

udało mi się go uruchomić poprzez zdefiniowanie go jako następnego

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);

Źródło

2013-12-11 13:00:41

to jest d3.js? jeśli tak, powinieneś o tym wspomnieć, ponieważ nie ma go w tagach pytań. – BiAiB

Cóż, nie napisałem tego pytania? Poszukałem kodu - znalazłem tę stronę. To pasowało do rachunku i to wydawało się działać dla mnie. –

Wiem, że nie napisałeś pytania. Kwestionariusz pyta o rozwiązania svg i wyrzucasz kod javascript. To nawet nie jest czysty javascript, więc użyłeś jakiejś biblioteki. Podejrzewam, że to d3.Ale kiedy losowy użytkownik wchodzi w twoją odpowiedź, nie jest pomocny, ponieważ nie ma pojęcia, jak go użyć. Głosuję nad tym, dopóki się nie rozwiniecie. – BiAiB

-4

Jeśli SVG jest jeden kolor, najlepszym sposobem jest konwersja pomostów żylnych do fontowe.

Możesz użyć narzędzia icomoon.io, aby połączyć wszystkie swoje SVG z plikami czcionek i użyć ich jako klas ikonek czcionek, takich jak Fontawesome.

Źródło

2017-03-18 13:46:10

To nie wydaje się w ogóle odpowiadać na pierwotne pytanie. –

Wypełnij element ścieżki SVG obrazem tła

Odpowiedz

Powiązane problemy