如何在html之外填充<polygon>或<path>？

问题描述 投票：0回答：3
html svg path polygon
3个回答
3
投票

我还没有找到填充多边形外部的方法。但是你可以产生同样的效果，虽然有点乱，就像这样。

从画布之外的某个地方开始。创建一条从那里到多边形周边近侧的点的路径，沿着多边形走 - 假设我们顺时针执行此操作 - 一直回到您加入它的位置，顺时针继续到外面的点你的画布，然后沿着画布的外侧逆时针绕一个大矩形，回到你第一次开始的地方。

2
投票

您无法“填充形状的外部”。但你可以在它后面放一个形状。

在您的示例中，您将有一个蓝色正方形，然后在它前面放置一个星形的剪辑图像。

0
投票

如果您有能力绘制您想要的形状，@user36956 的 answer 就可以工作。

但就我而言，我的意图是使用外部填充作为隐藏突起的方法，以避免绘制我需要的确切形状。

例如，当我想画一个沙滩球时，我画了椭圆，打算稍后用带有外部填充的圆圈覆盖（附图）

我用一个解决方法做到了这一点：我用大描边宽度在它周围画了一个圆圈，描边颜色为白色，填充颜色为无。

为了说明这一点，让我们考虑一下从框架顶部延伸到底部的矩形 SVG 

<!DOCTYPE html>
<html lang="en">
    <body>
        <svg width="200px" height="200px" style="border: 2px solid black">
            <rect x="80px" y="0px" width="40" height="200" fill="red"/>
        </svg>
    </body>
</html>

整个框架的高度为200px。我打算在框架的中心保留一个高度为 100px 的圆形区域。矩形的其余部分必须被擦除。也就是说，我想要一个半径为 50px 且外部填充的圆。为此，我添加了一个半径为 100px 且描边宽度为 100px 的圆。 笔画的一半在圆外，一半（50px）在圆内。这会在框架中心留下一个半径为20px的圆形区域，就像我想要的那样。

<!DOCTYPE html>
<html lang="en">
    <body>
        <svg width="200px" height="200px" style="border: 2px solid black">
            <rect x="80px" y="0px" width="40" height="200" fill="red"/>
            <circle cx="100px" cy="100px" r="100" stroke="white" fill="none" stroke-width="100"/>
        </svg>
    </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.