SVG填充模式適用於Firefox和Chrome，但不適用於Safari

Question

Safari 6.1.5未在SVG矩形中顯示圖案。 我終於將其簡化為以下測試案例：

<html>
<head>
    <style>
        .patterned { fill: url("#myid") none;  stroke:blue}                                                                          
    </style>
</head>

<body>
<svg width="2880" height="592">
    <defs>
        <pattern id="myid" patternunits="userSpaceOnUse" x="0" y="0" width="20" height="20">
            <circle r="10" cx=12 cy=10 fill="purple">
        </pattern>
    </defs>
    <rect class="patterned" height="27" width="58">
</svg>
</body>
</html>

Safari會顯示一個空的藍色輪廓，而Firefox和Chrome會在其中顯示波爾卡圓點。 我在實物中使用的對角陰影圖案存在相同的問題。

我實際上偶然發現了一個適用於此代碼段但不適用於真實代碼的奇怪解決方法：在所有三個瀏覽器上的url在白色/透明背景上顯示紫色圓圈之后，將其none更改為yellow 。 不幸的是，當我在實際應用程序中執行此操作時，我得到的背景是黃色且沒有圖案。

Answer 1

我現在認為我的測試用例是一條紅鯡魚。 它失敗的原因與我的實際網站無法顯示該模式的原因不同。 Safari瀏覽器可以做只是通過刪除產生相同的結果，其他瀏覽器none在URL后。 （可能是Safari中的錯誤；請參見其他答案。）

不幸的是，這僅意味着我無法將實際問題簡化為一個小的測試用例，因為真實的問題仍然無法解決。 經過更多的實驗，我發現可以通過在標題中添加<base>元素來破壞更正的測試用例。 大概Safari無法正確解析url("#myid") 。 （此外，如果Firefox和Chrome瀏覽器出現在名為styles/style.css的文件中，它似乎也有不同的解決方案； Chrome顯然使用主文檔作為基礎，Firefox顯然在樣式表中尋找{{defs}}。）

但是，如果我提供的校正后的測試用例與http://localhost:3000 ，那么Safari仍然可以正常工作，因此它不像file: vs. http:那樣簡單。 在我已經接管開發的龐大而復雜的Web應用程序中的某處，一定是其他內容。 我現在已經嘗試了三遍，通過刪除元素直到模式起作用來隔離問題（這就是我發現Firefox不喜歡從另一個文件夾定義樣式的方式），但是我在隔離問題上沒有運氣使用Safari。

我現在已經放棄了，而是采用了不同的方法來獲得設計師想要的視覺效果。

SVG填充模式適用於Firefox和Chrome，但不適用於Safari

問題描述

1 個解決方案

解決方案1
0 2014-08-30 06:54:40

SVG填充模式適用於Firefox和Chrome，但不適用於Safari

問題描述

1 個解決方案

解決方案1 0 2014-08-30 06:54:40

解決方案1
0 2014-08-30 06:54:40