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;}.

— jbochi
źródło

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

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

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

@Christoph Nie wiem, spróbuj i zobacz.

— robertc

@robertc Próbowałem i to nie zadziałało, ale miałem zduplikowany element stylu. Eliminując to, działało dobrze;)

— Christoph

@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,

@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,