居中SVG掩碼的一個元素

我是SVG的新手，所以這可能是一個簡單的問題。我正在嘗試在矩形內製作一個簡單的三角形SVG蒙版。我想實現的是得到響應的矩形與他的寬度，但該三角形應該 - 獲得一個固定大小 - 總是在視口的中心居中SVG掩碼的一個元素

你會明白我的片段更好：

.header-arrow { 
 
    height: 70px; 
 
} 
 
svg { 
 
    height: inherit; 
 
} 
 
#arrow-down-alpha { 
 
    transform: translateX(calc(50vw - 130px/2)); 
 
}

<div class="header-arrow"> 
 
    <svg width="100%"> 
 
    <defs> 
 
     <mask id="myMask" x="0" y="0" width="100%" height="100%"> 
 
     <rect fill="white" x="0" y="0" width="100%" height="100%" /> 
 
     <polygon id="arrow-down-alpha" fill="black" x="00" y="0" width="165px" height="100%" points="55.91 37.8 111.81 0 0 0 55.91 37.8" /> 
 
     </mask> 
 
    </defs> 
 

 
    <rect id="base-mask" mask="url(#myMask)" x="0" y="0" width="100%" height="100%" /> 
 
    </svg> 
 
</div>

它workning現在在Chrome，但平移X（或翻譯）是不是在Firefox和邊緣工作。我試圖使用transform SVG屬性，但似乎我不能使用百分比值。我不是很熟悉視框，但我不確定它會在這種情況下有所幫助。

無論如何感謝您的幫助！

來源

2016-12-26 katzu

我相信它的重複數據刪除技術。試着首先找到。 –

'x'，'y'，'width'和'height'不是''的有效屬性。 –

不幸的是，當用於SVG元素時，像'vw'這樣的新的CSS單元類型得不到很好的支持。 –

以下是一種不依賴新單位或calc()即可實現所需內容的方法。它也應該是跨瀏覽器兼容的。

工作原理：

我們在嵌套SVG包裹的三角形。我們使用SVG，因爲它具有可以佔用百分比的x屬性。
我們將此嵌套SVG定位在x="50%"。它現在集中在蒙版中（大致見下一步）。
我們移動三角形形狀，使其以x = 0爲中心。這樣就不會偏離面具的中心。
我們在嵌套的SVG上設置了overflow="visible"，所以現在離SVG左邊的三角形的部分（即x < 0）未被剪切。

.header-arrow { 
 
    height: 70px; 
 
} 
 
svg { 
 
    height: inherit; 
 
}

<div class="header-arrow"> 
 
    <svg width="100%"> 
 
    <defs> 
 
     <mask id="myMask" x="0" y="0" width="100%" height="100%"> 
 
     <rect fill="white" x="0" y="0" width="100%" height="100%" /> 
 
     <svg x="50%" overflow="visible"> 
 
      <polygon fill="black" points="0 38 56 0 -56 0" /> 
 
     </svg> 
 
     </mask> 
 
    </defs> 
 

 
    <rect id="base-mask" mask="url(#myMask)" x="0" y="0" width="100%" height="100%" /> 
 
    </svg> 
 
</div>

來源

2016-12-26 15:56:16

該死的。好的。這在FF中不起作用... –

[Bug在這裏報告給FF]（https://bugzilla.mozilla.org/show_bug.cgi?id=1325865） –

謝謝，有趣的嵌套svg技術！有趣的是Firefox如何解釋百分比，x =「25％」似乎對他有用^^ – katzu

居中SVG掩碼的一個元素

回答

相關問題