如何將SVG clipPath應用於不在webkit瀏覽器文檔左上角的HTML元素

我已經定義了一個SVG clipPath並將其應用於我的頁面上的幾個DIV。它在FF中按預期工作/顯示，但在Chrome和Safari（所有最新版本）中，如果HTML元素位於頁面的左上角，clipPath似乎只會影響HTML元素。如何將SVG clipPath應用於不在webkit瀏覽器文檔左上角的HTML元素

SVG對象

<svg height="0" width="0"> 
    <defs> 
     <clipPath id="clip"> 
      <path fill="#000000" d="M0,0.01c3.472,1.088,6.688,3.663,7.878,9.208c1.604,7.482,4.305,11.862,7.102,11.79v0.003 
     c0.007,0.001,0.014-0.001,0.02-0.001c0.007,0,0.014,0.002,0.021,0.001v-0.003c2.797,0.072,5.499-4.308,7.103-11.79 
     C23.312,3.672,26.527,1.098,30,0.01H0z"/> 
     </clipPath> 
    </defs> 
</svg>

CSS的元素被裁剪

.clipMe { 
    background: red; 
    width: 30px; 
    height: 21px; 
    clip-path: url(#clip); 
    -webkit-clip-path: url(#clip); 
}

JSFIDDLE

我相信this article開始使用coordi來解決這個問題nate系統，但我很快就迷失/困惑了很多次。這聽起來像是說使用不同的測量單位和座標，可以將clipPath應用於任何HTML元素......但我確實不確定。

我從Illustrator中導出了我的clipPath，因此如果需要使用不同的單位/座標，我不知道該怎麼做。

在Chrome和/或Safari中，是否有人成功地將SVG clipPath（這是一個實際路徑 - 不是多邊形或橢圓）應用於位於頁面左上角以外的某個HTML元素？

來源

2015-04-26 Daveh0

我認爲PaulOB's responses在SitePoint的包裝很好地解決了這個問題。長話短說：支持將SVG clipPath應用於HTML元素對於webkit瀏覽器還不夠。

來源

2015-04-27 11:43:57 Daveh0

當我在尋找這個問題的答案時，我碰到了你的問題。我發現了所有的答案，包括：「你不能」回答是一個警察的一點點。

我一直在嘗試，我發現是這樣的：

當你有一個SVG clipPath它不是位置能夠儘可能我可以告訴你，但如果你考慮到，你能折騰放入一個iframe，然後放置iframe，你是金。

我包括一個鏈接，我不確定在它爆炸之前它會在多長時間內到位，因爲我不是服務器的所有者。

example

該鏈接的內容是相當自我解釋，如果它不起來了，然後給我發短信或回覆這個帖子，我會放一個更新自己的服務器上的某個地方。

來源

2015-05-08 17:06:39

Chrome和Opera中的問題剛剛得到解決，並將在未來幾周內推出。瀏覽器確實總是在頁面原點處應用參考剪輯。新的行爲應該與Firefox匹配。

來源

2016-06-23 14:45:35 user3058245

如何將SVG clipPath應用於不在webkit瀏覽器文檔左上角的HTML元素

回答

相關問題