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或符号元素），可以影响用户单元解析的内容。这仍然无法解决所有情况。

要修复一些案例，您可以使用多个形状构建图像，每个形状都有不同的剪辑路径，以剪掉不需要的部分。您可以查看Rounded Corner Generator SVG输出以获取该方法的示例。

Answer 2

不幸的是，路径坐标只能用一个单位Viewport Coordinates来表示。

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

我可以使用带有'path'元素的混合单元吗？

3 个答案: