我可以使用带'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