Điền vào phần tử đường dẫn SVG bằng hình nền

166

Có thể đặt phần tử background-imageSVG <path>không?

Chẳng hạn, nếu tôi đặt thành phần class="wall", kiểu CSS .wall {fill: red;}hoạt động, nhưng .wall{background-image: url(wall.jpg)}không, cũng không .wall {background-color: red;}.

— jbochi
nguồn

Hiển thị cách đặt hình nền cho văn bản SVG, tùy ý trên cơ sở mỗi ký tự: stackoverflow.com/a/10853878/405017

— Phrogz

Đối với những người tìm kiếm thêm một số thông tin sâu, hãy kiểm tra liên kết

— Paulo Bueno

261

Bạn có thể làm điều đó bằng cách làm nền thành một mẫu :

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

Điều chỉnh chiều rộng và chiều cao theo hình ảnh của bạn, sau đó tham chiếu nó từ đường dẫn như thế này:

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

Ví dụ làm việc

— robertc
nguồn

rất đẹp, điều này có hoạt động với hình ảnh base64 không? thay vì wall.jpg một cái gì đó giống data:image/png;base64,iVBORw0KGgoAAnhư bạn làm trong CSS bình thường?

— Christoph

@Christoph Tôi không biết, hãy thử và xem.

— robertc

@robertc Tôi đã thử và nó không hoạt động, nhưng tôi có một yếu tố phong cách trùng lặp. Bằng cách loại bỏ nó, nó hoạt động rất tốt;)

— Christoph

@robertc: Tôi có một câu hỏi liên quan đến câu trả lời của bạn. Mẫu bắt đầu tại tọa độ tổng thể (0,0). Có thể để cho mẫu sử dụng hệ tọa độ cục bộ từ đối tượng được gắn vào không? Tôi muốn vẽ một trực tràng tại các vị trí khác nhau trong svg của tôi và điều xảy ra là, mô hình được lặp lại trong nền lỗ và các đối tượng được sử dụng làm mặt nạ.

— Tobias Golbs

@robertc vui lòng cập nhật câu trả lời của bạn để đề cập đến việc xlink:hrefkhông dùng nữa kể từ SVG 2 và chỉ cần sử dụng hrefngay bây giờ. developer.mozilla.org/en-US/docs/Web/SVG/Attribution/xlink:href

— Blake Regalia