滑塊中的剪輯路徑在Firefox上不起作用

我想剪切圖像。並使用剪輯路徑。對於Safari和Chrome而言，這並行，但不適用於Firefox。我搜索了這個網站的所有問題，這是我的代碼的最後一個形狀。但仍然無法讓它在Firefox上運行。滑塊中的剪輯路徑在Firefox上不起作用

這是我的形象：

<img src="images/ex-board.jpg" alt="First slide image" class="sliderimg">

這是我的CSS：

.sliderimg { 
    width: 100%; 
    height: 357px; 
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); 
    /*Firefox*/ 
    clip-path: url("#slider-poly"); 
}

最後將此添加到我的索引文件：

<svg width="0" height="0"> 
    <defs> 
     <clipPath id="slider-poly" clipPathUnits="objectBoundingBox"> 
     <polygon points="0 0, 1 0, 1 0.85, 0 1" /> 
     </clipPath > 
    </defs> 
</svg>

但仍可以正常工作在Safari和Chrome上，但不是Firefox。

來源

2016-03-27 cvdogan

閱讀此：http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to –

而這：http：///stackoverflow.com/questions/31772152/svg-clip-path-online-works-if-css-not-linked-but-inline –

我刪除了URL內的引號。並添加外部svg文件並將其中的svg代碼。並在'＃'之前添加它的名字。但不幸的是，問題仍然是一樣的。 – cvdogan

我覺得你對Firefox的支持三個選項（我已經測試了所有三個）：

使用絕對路徑。
引用外部svg文件。使用正確的SVG文檔格式：https://www.w3.org/TR/SVG/struct.html

例如：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> 
    <defs> 
    <clipPath id="slider-poly"> 
    <polygon points="100,0 300,0 200,200"/> 
    </clipPath> 
    </defs> 
</svg>

在樣式表中：

clip-path: url(filename.svg#slider-poly);

使用內部樣式表。

來源

2016-03-27 17:06:17

我已經使用了一個內部樣式表，它解決了這個問題。我會在稍後嘗試其他選項。現在適用於所有3種瀏覽器。（safari，chrome，firefox）但唯一的問題是關於谷歌地圖iframe。當我創建一個類並在其中放入類似的代碼時。這適用於Safari和Firefox，但不適用於Chrome。你有什麼想法嗎？ – cvdogan

@cvdogan我沒有更好的想法，試圖嘗試一些變化。或者等待幾年來獲得一致的瀏覽器支持。 –

Spec says它必須是<clipPath>元素。您的標記包含<imagePath>，據我所知，它甚至不是有效的SVG。這意味着Safari和Chrome不符合規範。

來源

2016-03-27 14:39:46 the8472

更改爲''但仍然一樣。 – cvdogan

滑塊中的剪輯路徑在Firefox上不起作用

回答

相關問題