Svg 调整窗口大小时剪辑路径与边界半径的问题

我想使用SVG作为

剪辑路径

来环绕图像的边缘。是的，出于各种原因，我必须这样做

问题: 调整浏览器窗口的大小时，形成圆角的点和控制柄会根据图像（边界框）不断变化的大小进行调整，因为我使用的是

clipPathUnits=“ObjectBoundingBox”

。这会导致圆边失去其“圆度”，整体看起来非常糟糕。CSS

border radius

属性没有此问题。无论您如何调整浏览器窗口的大小，使用

边框半径剪裁的div的边缘永远不会松动其圆形。当您将浏览器窗口调整为最窄或最宽的状态时，问题最为明显。试试这个，你就会明白我的意思了。顶部图像使用
边框半径
，底部图像使用
剪辑路径
。是否有任何方法可以强制SVG片段路径的唯一圆形边缘保持同样的圆形，无论图像大小如何调整，都不会牺牲片段路径尺寸的响应性？这可能吗？如果有JavaScript解决方案的话，我完全愿意。谢谢
 您可以欺骗
元素使其具有与图像相同的尺寸，然后使用相对单位调整剪辑路径的大小。缺点是不能重用这些路径，但必须为每个图像定义一个路径


.box{
左：5%；
身高：40%；
位置：绝对位置；
背景颜色：蓝色；
溢出：隐藏；
}
#框1{
最高：5%；
宽度：50%；
剪辑路径：url（#clipPath1）；
}
#框2{
最高：55%；
宽度：90%；
剪辑路径：url（#clipPath2）；
}
.花{
宽度：100%；
身高：100%；
对象匹配：覆盖；
对象位置：中心；
}
svg{
宽度：100%；
身高：100%；
位置：绝对位置；
}

您可以欺骗
元素使其具有与图像相同的尺寸，然后使用相对单位调整剪辑路径的大小。缺点是不能重用这些路径，但必须为每个图像定义一个路径


.box{
左：5%；
身高：40%；
位置：绝对位置；
背景颜色：蓝色；
溢出：隐藏；
}
#框1{
最高：5%；
宽度：50%；
剪辑路径：url（#clipPath1）；
}
#框2{
最高：55%；
宽度：90%；
剪辑路径：url（#clipPath2）；
}
.花{
宽度：100%；
身高：100%；
对象匹配：覆盖；
对象位置：中心；
}
svg{
宽度：100%；
身高：100%；
位置：绝对位置；
}

漂亮！似乎它起作用了。我从没想过。谢谢美丽的！似乎它起作用了。我从没想过。谢谢