SVG ile seçilebilen metinle bir görüntüyü maskeleme - mümkün mü?

Dergi vb. Başlıklarda sıkça görülen düzgün bir yazım hatası, gerçekten kalın yazı tipini seçmek ve metnin içine bir resim koymaktır. İşte etkinin rastgele örnek: web tasarım olarak alt text SVG ile seçilebilen metinle bir görüntüyü maskeleme - mümkün mü?

, düz html/css/js ile bunu yapmanın bir yolu yoktur. Flaşla veya bir bitmap görüntüsü ile yapılabilir, ancak bu tekniklerin bazı büyük dezavantajları olduğu açıktır.

Gerçi SVG ile bunu yapmak mümkün olup olmadığını merak? Hiç SVG kullanmadım, ama eğer bu mümkün ise kafamın etrafına sarılmaya değer olabilir. Örneğin, bir javascript'in sayfadan geçmesine ve belirli öğeleri (h1s ya da belirli sınıflar) aramasına izin vermek ve anında, seçilen yazı tipinde seçilebilir yazı içeren bir SVG dosyası oluşturmak mümkün olabilir mi? görüntü harf şekillerine kırpılmış? Herkes, bu yapılmıştır eğer maskeleme yapmaya gerek yoktur gerçi, öğreticiler, mümkündür

kaynak

2010-09-03 last-child

Bu sorunun şu an için ilginç olabilir başka bir şey ..., SVG ile bunu yapabilirsiniz biliyor mu sadece bir örüntü olarak belirtin:

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

Ardından referans olduğunu metninizde fill olarak: Ben an example yaptık

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

, en acı yanı ne patternUnits vebulmaktan 0 aslında, this MDC article was helpful yaptı.

metni (sanırım, Safari ve) Opera veya Chrome seçilebilir ancak Firefox'ta konumundan dolayı ̶ l̶o̶n̶g̶ ̶s̶t̶a̶n̶d̶i̶n̶g̶ ̶b̶u̶g̶ (böcek artık sabit, o kadar Firefox 24 veya çalışmak için bekliyoruz). SVG, IE'de çalışmıyor (her durumda 9'a kadar), ya bununla uğraşmayın ya da benzer şeyler yapmak için VML'yi alıp alamayacağınızı görün. Bunu yapmak için bir JavaScript yardımcı programı oluşturmaya çalışacaksanız, iyi bir başlangıç noktası, yukarıdaki çalışmayınumaralı telefondan nasıl yapılacağımızı anlamaya çalışıyor olabilir.

kaynak

2010-09-03 13:40:32 robertc

aynıdır) teşekkür ederiz! Tam olarak aradığım şey bu. Yaptığınıza çok iyi bakacağım ve ayaklarımı svg ile ıslatacağım. Bu etkinin bu kadar basit olmaması durumunda şaşırıyorum; standart css/html olasılıklarında bu kadar bariz bir sınırlama var ... –

@ son çocuk Standart HTML/CSS'ye getirilen birkaç SVG özelliğini göreceğimizi düşünüyorum. Sonuçta aynı oluşturma motoru, efekt elde etmek için kod Çoğu tarayıcıda zaten var - tıpkı birkaç Canvas özelliği (gölgeler, dönüşümler) artık CSS'nin bir parçası. – robertc

Çok güzel! Teşekkürler! – Kriem

bu deneyin;

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

burada

http://jsfiddle.net/nedudi/v84p5/1/ jsfiddle

kaynak

2013-12-24 22:45:32 Nedudi

SVG ile seçilebilen metinle bir görüntüyü maskeleme - mümkün mü?

cevap

İlgili konular