svg rect填充背景圖片性能問題

我想畫一個圖片作爲SVG矩形的背景。我也如下，svg rect填充背景圖片性能問題

<pattern id = "HappySmile" width="97" height="40" > 
    <image width="97" height="30" xlink:href="resources/images/HappySmile.png"></image> 
    </pattern>

它的工作原理，但性能已大大dropped.I正在申請36個rects。任何建議都會非常有幫助。

解釋該方案的圖像可以在以下鏈接中找到。

http://i.stack.imgur.com/Jo6b2.png

謝謝。

來源

2015-04-21 sheikirfanbasha

如果所有的「happysmile」 rects看起來是一樣的，你具有隻有一個正確，而且引用相比，與元素？ –

@ErikDahlström嗨埃裏克，我試過，但沒有找到任何改變。我這樣做如下： \t <模式ID = 「HappySmile」寬度= 「97」 HEIGHT = 「40」> \t <圖像寬度= 「97」 HEIGHT = 「30」的xlink：HREF =「資源/images/HappySmile.png 「> \t <克ID =」 HappySmileRect 「> <矩形X = 」0「 y = 」0「寬度=」 100" HEIGHT = 「30」 RX = 「20」 RY = 「20」風格= 「填充：網址（#HappySmile）」/> – sheikirfanbasha

如果模式對您來說太慢了。請嘗試使用<mask>或<clipPath>代替。

下面是如何使用掩碼來製作「磚」形狀的示例。在你的情況下，你會用我的「HappySmile」圖片替換我用過的樣本。

<svg width="600" height="400"> 
 
    <defs> 
 
    <mask id="lozenge"> 
 
     <circle cx="15" cy="15" r="15" fill="white"/> 
 
     <rect x="15" y="0" width="67" height="30" fill="white"/> 
 
     <circle cx="82" cy="15" r="15" fill="white"/> 
 
    </mask> 
 
    <image id="brick1" width="97" height="30" xlink:href="http://lorempixel.com/output/abstract-q-c-97-30-9.jpg" mask="url(#lozenge)"/> 
 
    </defs> 
 

 
    
 
    <use xlink:href="#brick1" x="50" y="50"/> 
 
    <use xlink:href="#brick1" x="150" y="50"/> 
 
    <use xlink:href="#brick1" x="250" y="50"/> 
 
    <use xlink:href="#brick1" x="350" y="50"/> 
 
    <use xlink:href="#brick1" x="450" y="50"/> 
 

 
    <use xlink:href="#brick1" x="50" y="100"/> 
 
    <use xlink:href="#brick1" x="150" y="100"/> 
 
    <use xlink:href="#brick1" x="250" y="100"/> 
 
    <use xlink:href="#brick1" x="350" y="100"/> 
 
    <use xlink:href="#brick1" x="450" y="100"/> 
 

 
    <use xlink:href="#brick1" x="50" y="150"/> 
 
    <use xlink:href="#brick1" x="150" y="150"/> 
 
    <use xlink:href="#brick1" x="250" y="150"/> 
 
    <use xlink:href="#brick1" x="350" y="150"/> 
 
    <use xlink:href="#brick1" x="450" y="150"/> 
 

 
</svg>

來源

2015-04-21 04:38:59

您好，我試圖如下使用： <屏蔽ID = 「HappySmile」 maskUnits = 「objectBoundingBox」 maskContentUnits =「objectBounding框「> <圖像寬度=」 97" HEIGHT = 「30」的xlink：HREF = 「資源/圖像/ HappySmile.png」> JS： b.setAttribute（ '掩模'，「URL（#HappySmile ）「）; 到目前爲止沒有運氣 – sheikirfanbasha

這不是面具的工作方式。您將遮罩應用於圖像。而不是相反。 –

我已經添加了一個例子。 –

svg rect填充背景圖片性能問題

回答

相關問題