我可以使用带有'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/).我试过使用'path'元素,但在我看来,我们不能使用'path'(像素和百分数)的混合单位.我不能使用形状组合,因为它不会起作用半透明和渐变填充.

所以我的qeustion是否可以使用混合单位的'path'元素？也许我忽略了另一项工作？

Answer 1

路径和点列表只能以用户单位指定。通过使用“viewBox”指定新坐标系的容器（例如 svg 或符号元素），可以影响用户单位解析的内容。这仍然不能解决所有案件。

要修复更多情况，您可以使用多个形状构建图像，每个形状都有不同的剪切路径，以剪掉不需要的部分。您可以查看圆角生成器SVG 输出，了解该方法的示例。