如何在svg中嵌入圆角图像_Svg

如何在svg中嵌入圆角图像

svg

如何在svg中嵌入圆角图像,svg,Svg,我想在svg文件中嵌入一个圆角图像。我该怎么办？我在谷歌上搜索了那个问题，但找不到任何有用的。。。我很感激任何帮助或提示 <!DOCTYPE html> <html> <body> <svg width="640" height="800"> <rect x="280" y="0" ry="10" width="80" height="100" style="fill:limegreen; stroke:black;"

我想在svg文件中嵌入一个圆角图像。我该怎么办？我在谷歌上搜索了那个问题，但找不到任何有用的。。。我很感激任何帮助或提示

<!DOCTYPE html>
<html>
<body>

<svg width="640" height="800">

    <rect x="280" y="0" ry="10" width="80" height="100"
    style="fill:limegreen; stroke:black;" />

    <rect x="260" y="90" ry="15" width="120" height="30"
    style="fill:mintcream; stroke:black;" />



    <rect x="200" y="150" ry="10" width="80" height="100"
    style="fill:limegreen; stroke:black;" />

    <rect x="180" y="240" ry="15" width="120" height="30"
    style="fill:mintcream; stroke:black;" />


    <rect x="360" y="150" ry="10" width="80" height="100"
    style="fill:limegreen; stroke:black;" />

    <rect x="340" y="240" ry="15" width="120" height="30"
    style="fill:mintcream; stroke:black;" />



    <rect x="120" y="300" ry="10" width="80" height="100"
    style="fill:limegreen; stroke:black;" />

    <rect x="100" y="390" ry="15" width="120" height="30"
    style="fill:mintcream; stroke:black;" />


    <rect x="280" y="300" ry="10" width="80" height="100"
    style="fill:limegreen; stroke:black;" />

    <rect x="260" y="390" ry="15" width="120" height="30"
    style="fill:mintcream; stroke:black;" />


    <rect x="440" y="300" ry="10" width="80" height="100"
    style="fill:limegreen; stroke:black;" />

    <rect x="420" y="390" ry="15" width="120" height="30"
    style="fill:mintcream; stroke:black;" />

</svg>

</body>
</html>

绿色应该是不同的图像。那么，如何使图像具有圆角呢？

您可以将相同的clipPath应用于多个元素，如以下所示

<!DOCTYPE html>
<html>
<body>

<svg width="640" height="800">

    <clipPath id="clip" clipPathUnits="objectBoundingBox">
        <rect ry="0.1" width="1" height="1" fill="black" />
    </clipPath>

    <rect x="280" y="0" width="80" height="100"
    style="fill:limegreen;" clip-path="url(#clip)" />

    <rect x="260" y="90" ry="15" width="120" height="30"
    style="fill:mintcream; stroke:black;" />



    <rect x="200" y="150" width="80" height="100"
    style="fill:limegreen;" clip-path="url(#clip)" />

    <rect x="180" y="240" ry="15" width="120" height="30"
    style="fill:mintcream; stroke:black;" />

</svg>

</body>
</html>

将图像剪辑到一个clipPath，该clipPath是带有rx和ry setwell的

元素。我想在一个svg图像中插入多个图像。因此，我必须为每个图像定义一个唯一的clippath？显示您已经拥有的代码以及您希望它实现的目标。我现在编辑了我的第一篇文章并插入了代码