CSS - 剪輯路徑在safari上不能正常工作

我正在開發一個帶形狀的菜單，但在safari中它不能正常運行。在Safari瀏覽器中會損壞佈局，我不知道爲什麼。如果我不使用svg標籤並只使用css剪輯路徑，它在safari和chrome中運行良好，但不在firefox中運行。CSS - 剪輯路徑在safari上不能正常工作

的CSS：

.menu { 
    width: 65%; 
    height: 40px; 
    background-color: red; 
    -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); 
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); 
    -webkit-clip-path: url("#clipping"); 
    clip-path: url("#clipping"); 
    position: absolute; 
    right: 0px; 
    bottom: 0; 
} 

.menu:before { 
    content: ''; 
    width: 99.8%; 
    height: 40px; 
    -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); 
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); 
    -webkit-clip-path: url("#clipping"); 
    clip-path: url("#clipping"); 
    background: black; 
    display: block; 
    position: absolute; 
    top: 2px; 
    left: 2px; 
    right: 2px; 
}

HTML：

<div class="menu"> 
<svg width='0' height='0'> 
    <defs> 
    <clipPath id="clipping" clipPathUnits="objectBoundingBox"> 
    <polygon points="0.05 0, 1 0, 1 1, 0 1, 0 1" /> 
    </clipPath> 
    </defs> 
</svg> 
</div>

謝謝

來源

2017-06-18 user3242861

部分支持是指支持形狀和內聯SVG的URL（#foo）語法，而不是形狀外部SVGs。 http://caniuse.com/#search=clip-path – Rob

那麼，我該怎麼做？ @Rob – user3242861

夾路徑CSS屬性不被Safari瀏覽器（WebKit的）支持，大部分即邊緣版本。

來源

2017-06-18 15:58:49

那麼，解決方案是什麼？ @VolkanSağ – user3242861

你爲什麼要剪輯div？你可以用你想要的svg路徑繪製任何設計。 –

如果你想剪輯，你應該用css-> overflow創建一個div：hidden;位置：相對;在這裏面，你應該創建一個div位置：absolute;左和頂，你想:) –

這是爲我工作在Safari

<svg viewBox="0 0 250 250"> 
    <polygon points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" /> 
    <polygon points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30" /> 
    <path d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1 
     L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/> 
</svg>

來源

2017-06-18 16:04:57

如果我走出CSS剪輯路徑：url（）它在safari中工作正常，但在firefox中不起作用。 @AbdullahKanza – user3242861

CSS - 剪輯路徑在safari上不能正常工作

回答

相關問題