如果存在媒體查詢，則SVG掩碼不起作用

TL; DR：我需要根據另一個現有矩形的大小和位置屏蔽掉SVG中的一個矩形的一部分，該矩形將動態更改。一個Chrome瀏覽器問題阻止了我試過的mask + use方法。 如何根據現有形狀製作遮罩或倒轉剪輯路徑？如果存在媒體查詢，則SVG掩碼不起作用

全面概述： 我使用D3.js，我現在用的是brush控制毛筆嵌入SVG添加到一個矩形。默認情況下，這會爲SVG添加一些額外的元素，其中包括一個rect類別extent，它顯示刷新區域的大小。

而不是像在大多數D3的例子中那樣將畫筆範圍渲染爲矩形頂部的半透明疊加層，我試圖從半透明疊加層中「切出」範圍，以便畫筆區域顯示下面的真實顏色。根據this question，我正在嘗試使用mask元素來執行此操作，其中子元素引用了該區域的use元素。隨着一些D3的魔術，我現在有這樣的結構：

<svg width="100" height="100"> 
    <g class="brush-layer inverted"> 
    <defs> 
     <mask id="mask835"> 
     <rect fill="#fff" width="100%" height="100%"></rect> 
     <use fill="#000" xlink:href="#extent848"></use> 
     </mask> 
    </defs> 
    <g class="brush" style="pointer-events: none;"> 
     <rect class="overlay" mask="url(#mask835)" width="100%" height="17"></rect> 
     <rect class="extent" x="30" width="52" height="17" id="extent848"></rect> 
    </g> 
    </g> 
</svg>

這很好...有點。事實證明，似乎有一個棘手的Chrome bug，其中I've filed here，如果在CSS中有@media查詢，將阻止應用掩碼。您可以看到working version here和failing version here（在Chrome中失敗，在FF中工作）。

我需要這個在Chrome中工作，並且不能刪除@media查詢。我還需要使use元素工作，因爲D3會自動調整extent矩形的大小，這就是我需要掩蓋的形狀。

那麼，我怎麼能屏蔽掉一個rect的一部分，基於另一個rect，而無需使用上面的mask + use策略？

來源

2013-08-29 nrabinowitz

一個可能的解決方法可能是使用自定義剪輯路徑，但它可能不會那麼優雅。有關如何使用剪輯路徑執行此操作的示例可以在this question中找到。

來源

2013-08-30 11:05:44

這裏的問題是，在混合的某個地方，我幾乎必須有一個''元素引用'rect'範圍。 'd3.brush'組件動態更新矩形的大小和形狀，我真的不希望跟蹤這些更改並更新自定義的'path'元素作爲響應。據我所知，沒有辦法使用'clipPath'工作。 – nrabinowitz

如果存在媒體查詢，則SVG掩碼不起作用

回答

相關問題