SVG多邊形填充與圖像不工作

我以前工作過，但由於某種原因，我的模式似乎沒有任何工作。SVG多邊形填充與圖像不工作

我試過所有的方法來獲得這個工作，它用純色完美地工作，但是當我嘗試使用一個模式時，它變得透明。

我甚至開始新的SVG模式樣本，它仍然沒有工作。

SVG代碼

<svg width="100" height="100"> 
    <defs> 
    <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100"> 
     <image x="0" y="0" height="100" width="100" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image> 
    </pattern> 
    </defs> 
    <circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/> 
</svg>

這只是顯示一個透明的圓。就我所知，這裏的一切都是正確的，沒有CSS影響'圖像''模式'或'圓'元素。

在chrome + firefox中都有問題，所以很確定它的代碼問題或者頁面上的其他內容。

設法得到它在這裏工作：http://www.slidingwardrobesexpress.co.uk/index.php?dispatch=wardrobe_tool.step1

第一衣櫃門應該用暗紅色的圖像填充。

任何想法？我無法找到任何其他提及的SVG模式獲得無填充時給予一個模式來填補。

我的實際生活的代碼是：

<defs> 
<pattern id="img-lacobel_darkred" patternUnits="userSpaceOnUse" width="50" height="50" ><image xlink:href="/{$img_path}/lacobel_aluminiumrich.jpg" x="0" y="0" /></pattern> 
</defs> 
<polygon class="svgDoor1 D1S1" id="D1S1P1" points="8,12 131,41 131,415 8,428" fill="url(#img-lacobel_darkred)" style="stroke:black;stroke-width:1" />

來源

2014-12-05 Richard Edwards

看着現場代碼...模式ID不匹配多邊形填充網址...也許？ – rfornal 2014-12-05 15:05:55

剛剛嘗試了第一組代碼使用Chrome上的JS小提琴...作品。 http://jsfiddle.net/rfornal/7fwxteka/ – rfornal 2014-12-05 15:07:56

id存在，它只是它的一部分。我已經更新了上面的代碼。 – 2014-12-05 15:23:53

您的實際現場代碼缺乏寬度，在<image>元素height屬性。在SVG 1.1中，這些默認值（相當無益）爲0.

您也正在使用<base>標記，這是一種很好的方式來打破所有引用，因爲基礎被添加到所有片段標識符（也就是＃符號）。移除<base>標籤可以使您的測試案例在您的網站上運行。還有其他解決方案，例如，如果您確實需要<base>標籤，則所有網址都是絕對的。

來源

2014-12-05 15:15:04

漂亮。基本標籤，甚至沒有在那裏看到它。很多appriciated – 2014-12-05 15:32:15

每天學習更多......謝謝！ – rfornal 2014-12-05 15:35:54

SVG多邊形填充與圖像不工作

回答

相關問題