我可以使用帶'path'元素的混合單元嗎？

Question

SVG有一個矩形元素，其尺寸可以用像素的所有者和半徑的百分比來指定。因此，通過執行以下操作

<div style="position: relative;"> 
<object class="AIRound" type="image/svg+xml" 
data="data:image/svg+xml,<svg 
xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='100%' 
height='100%' rx='10px' ry='10px' fill='#99ff99' 
opacity='0.9'/></svg>" style="position:absolute; left:0px; top:0px; 
width:100%; height:100%; z-index:-100;"></object> 
Sample text<br>Sample text 
Sample text<br>Sample text 
</div>

我可以帶圓角與不取決於塊大小的恆定半徑得到。但是一個帶圓角的簡單矩形很無聊，有時候你想要一些奇特的東西（例如http://my.opera.com/）。我試過使用「路徑」元素，但在我看來，我們不能使用「路徑」（像素爲&百分比）的混合單位。我無法使用組合形狀，因爲它不能使用半透明和漸變填充。

所以我的問題是我可以使用混合單位的'路徑'元素？也許還有另一項我忽視的工作？

Answer 1

只能以用戶單位指定路徑和點列表。通過具有用'viewBox'指定新座標系的容器（例如svg或符號元素），可以影響用戶單元解析的內容。這仍然不能解決所有情況。

要修復幾個案例，您可以使用多個形狀構建圖像，每個形狀都使用不同的剪輯路徑以剪掉不需要的部分。您可以查看一下Rounded Corner Generator SVG輸出以獲取該方法的示例。

Answer 2

不幸的是，路徑座標只能用一個單位，視口座標表示。

Answer 3

有一種變通方法：

<svg width='100%' height='100%' viewBox='0 0 100 100'> 
<!-- Now in here, a coordinate (25,50) corresponds to 
    (25%,50%) of the outer viewport. --> 
<path d="M36,96 C 54,100 94,73 97,61 ..."/> 
</svg> 

編號： http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html