Mặt nạ hình ảnh có văn bản có thể chọn với SVG - có thể?

Question

Một hiệu ứng typographic gọn gàng thường thấy các tiêu đề trong các tạp chí vv, là chọn một phông chữ thực sự đậm và đặt một hình ảnh bên trong văn bản. Dưới đây là ví dụ ngẫu nhiên về hiệu ứng:

Trong thiết kế web, không có cách nào để thực hiện việc này với html/css/js thuần túy. Nó có thể được thực hiện với flash hoặc với một hình ảnh bitmap nhưng những kỹ thuật rõ ràng có một số hạn chế lớn.

Tôi tự hỏi liệu có thể thực hiện điều này với SVG không? Tôi chưa bao giờ sử dụng SVG, nhưng nếu điều này là có thể, nó có thể là giá trị cố gắng quấn quanh đầu của tôi. Ví dụ:

Ví dụ: có thể cho phép javascript đi qua trang và tìm kiếm các phần tử nhất định (h1 hoặc các lớp nhất định) hay không, tạo ra tệp SVG có chứa văn bản có thể chọn trong phông chữ đã chọn bằng hình ảnh cắt bớt các hình dạng chữ? Có ai biết nếu điều này đã được thực hiện, hướng dẫn, bất kỳ điều gì khác có thể thú vị khi xem xét vấn đề này ...

Answer 1

Có thể làm điều này với SVG, mặc dù bạn không cần phải làm mặt nạ, bạn có thể chỉ cần chỉ định hình ảnh làm mẫu:

<defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450"> 
     <image xlink:href="daisy-grass-repeating-background.jpg" x="0" y="0" 
      width="600" height="450" /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php--> 
    </pattern> 
</defs> 

Sau đó tham khảo đó là fill trong văn bản của bạn:

<text fill="url(#img1)"> 

tôi đã thực hiện an example, phần đau đớn nhất là tìm ra được những gì patternUnits và patternContentUnits thực sự đã làm, this MDC article was helpful.

Các văn bản là có thể lựa chọn trong Opera và Chrome (và, tôi đoán, Safari) nhưng không phải Firefox vì một ̶ l̶o̶n̶g̶ ̶s̶t̶a̶n̶d̶i̶n̶g̶ ̶b̶u̶g̶ (bug bây giờ cố định, hy vọng nó sẽ làm việc trong Firefox 24 hoặc lâu hơn). SVG không hoạt động trong IE (cho đến khi 9 đi ra, dù sao) vì vậy hoặc là không bận tâm với nó hoặc xem nếu bạn có thể nhận được VML để làm những việc tương tự. Nếu bạn đang cố gắng và xây dựng một tiện ích JavaScript để làm điều này một điểm khởi đầu tốt có thể được tìm cách của chúng tôi để làm cho công việc trên trong Raphaël.

Answer 2

Hãy thử điều này;)

<svg> 
    <defs> 
    <clipPath id="textClip"> 
     <text id="text1" x="20" y="300" style="font-family: Arial; font-weight: bold;font-size: 180pt; stroke: black; fill: none;">HEY</text> 
    </clipPath> 
    <g id="shapes"> 
     <image id="resultImg" preserveAspectRatio="xMidYMid meet" width="520px" height="520px" xlink:href="http://beerhold.it/500/500"/> 
    </g> 
    </defs> 
    <g > 
    <use xlink:href="#shapes" style="clip-path: url(#textClip);"/> 
    </g> 
</svg> 

ở đây là như nhau trong jsfiddle http://jsfiddle.net/nedudi/v84p5/1/