SVG yol öğesini bir arka plan görüntüsü ile doldurun

166

background-imageSVG <path>öğesi için a ayarlamak mümkün müdür ?

Örneğin, öğeyi ayarlarsam class="wall", CSS stili .wall {fill: red;}çalışır, ancak .wall{background-image: url(wall.jpg)}çalışmaz..wall {background-color: red;} .

— jbochi
kaynak

SVG metni için arka plan resminin, isteğe bağlı olarak karakter başına temelinde nasıl ayarlanacağını gösteren: stackoverflow.com/a/10853878/405017

— Phrogz

Derin bilgi biraz daha arayanlar için bu makalede kontrol linki

— Paulo Bueno

261

Arka planı bir desene dönüştürerek yapabilirsiniz :

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

Genişlik ve yüksekliği görüntünüze göre ayarlayın, ardından şu şekilde yoldan referans alın:

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

Çalışma örneği

— robertc
kaynak

çok güzel, bu da base64 görüntüleri ile çalışıyor mu? wall.jpg yerine data:image/png;base64,iVBORw0KGgoAAnormal CSS'de olduğu gibi bir şey mi?

— Christoph

@Christoph Bilmiyorum, dene ve gör.

— robertc

@robertc denedim ve işe yaramadı, ancak yinelenen bir stil öğem vardı. Bunu ortadan kaldırarak gayet iyi çalıştı;)

— Christoph

@robertc: Cevabınızla ilgili bir sorum var. Örüntü küresel koordinatlardan (0,0) başlar. Desenin bağlı nesneden yerel koordinat sistemini kullanmasına izin vermek mümkün müdür? Benim svg farklı yerlerde bir rekt çizmek istiyorum ve ne olur, desen delik arka planda tekrarlanır ve nesneler maske olarak kullanılır.

— Tobias Golbs

@robertc lütfen xlink:hrefSVG 2'den beri kullanımdan kaldırıldığını belirtmek ve hrefşimdi kullanmak için yanıtınızı güncelleyin . developer.mozilla.org/tr-TR/docs/Web/SVG/Attribute/xlink:href

— Blake Regalia