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

166

Czy można ustawić background-imagedla <path>elementu SVG ?

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

html css image svg background-image jbochi
źródło
1
Pokazuje, jak ustawić obraz tła dla tekstu SVG, opcjonalnie dla każdego znaku: stackoverflow.com/a/10853878/405017
Phrogz
dla tych, którzy szukają więcej szczegółowych informacji, sprawdź link do
Paulo Bueno

Odpowiedzi:

261

Możesz to zrobić, przekształcając tło we wzór :

<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ść zgodnie z obrazem, a następnie odwołaj się do niego ze ścieżki w następujący sposób:

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

Przykład roboczy

robertc
źródło
3
bardzo dobrze, czy to działa również z obrazami base64? zamiast wall.jpg coś takiego data:image/png;base64,iVBORw0KGgoAAjak w normalnym CSS?
Christoph
12
@Christoph Nie wiem, spróbuj i zobacz.
robertc
2
@robertc Próbowałem i to nie zadziałało, ale miałem zduplikowany element stylu. Eliminując to, działało dobrze;)
Christoph
4
@robertc: Mam pytanie dotyczące Twojej odpowiedzi. Wzór zaczyna się od współrzędnych globalnych (0,0). Czy jest możliwe, aby wzorzec korzystał z lokalnego układu współrzędnych z dołączonego obiektu? Chcę narysować prostokąt w różnych miejscach w moim svg i co się dzieje, że wzór jest powtarzany w tle otworu, a obiekty są używane jako maski.
Tobias Golbs,
6
@robertc, zaktualizuj swoją odpowiedź, aby wspomnieć, że xlink:hrefjest przestarzała od SVG 2 i po prostu użyj hrefteraz. developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
Blake Regalia,