Question

我想在svg文件中嵌入带圆角的图像。我怎么能接受这个？我用Google搜索了这个问题，但找不到任何有用的东西...... 我很感激任何帮助或提示。

<!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>

绿色应该是不同的图像。那么我如何让图像有圆角？

Answer 1

您可以将同一个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>

如何在svg中嵌入带圆角的图像

1 个答案: