在SVG中使用蒙版从圆圈中剪切用户形状

文章/答案/技术大牛

发布

1回答

svg

我从我们的设计师那里得到了一个图标来添加到我们的自定义图标字体中。该图标应该是一个圆圈与一个用户的剪裁。不幸的是，设计者没有遵循一些字体自定义原则，比如没有不透明，只使用了一种颜色。用户剪贴画在黑色圆圈上是白色的。现在，我正在尝试使用掩码将用户排除在圆圈之外。> 现在不知何故，完整的圆圈消失了。我还试着将笔触改为白色，但这只给出了用户图标在</e

浏览 22提问于2019-06-19得票数 0

回答已采纳

1回答

如何使用fabricJS从画布中的图像对象中删除剪辑路径蒙版？

fabricjs、dispose、clip-path

我在一个图像编辑工具中工作，其中我需要一个图像剪切蒙版功能。我已经把一个切换按钮为剪辑图像进入圆圈。并希望将其从圆形切换到正方形(或其他固定形状)，并将正方形(或其他固定形状)切换为圆形。但我不知道如何删除剪辑蒙版，如果切换按钮关闭。是否有任何方法可以从<

浏览 25提问于2019-10-21得票数 1

4回答

具有系统映像的反转掩模快速图形用户界面

ios、swiftui、sf-symbols

我正在尝试在swiftUI中从一个圆形中剪切出一个sf符号。然而，我想要的是反转蒙版的效果:符号是从圆圈中切出来的，如下图所示： ? 请注意，实际背景不是图像中的红色，而是用户上传的图像，因此不可能将符号foregroundColor设置为红色。有没有办法反转符号/图像的蒙版，使圆圈上有一个与图像形状一致的洞？

浏览 81提问于2020-02-12得票数 8

回答已采纳

1回答

包含其他div的div上的svg剪辑路径(无css:clip-path)

html、css、svg

我想把一个剪切蒙版(圆圈形状)放在上面，这样如果我把鼠标放在上面，它就会变成一个矩形，并显示整个内容(这种效果很常见，不是吗？)但是很明显，我甚至不能执行在div上放置一个圆圈裁剪遮罩的任务以下是我尝试过的方法 body { background-color:#000; <defshttps://picsum.photos/200/300'><

浏览 16提问于2019-01-02得票数 0

回答已采纳

2回答

在SVG中屏蔽？

html、svg

在svg中用切片绘制圆形的最好方法是什么？这将被用来覆盖在另一个彩色圆圈的顶部，作为一种遮罩效果。

浏览 1提问于2011-03-15得票数 2

1回答

SVG蒙版不适用于illustrator生成的SVG(所有浏览器)

html、css、svg、masking

所以直截了当地说-我想要这张地图是蓝球的面具。我使用的是.clas

浏览 0提问于2016-02-19得票数 0

2回答

如何在android中实现不规则形状的裁剪

android

我有要求裁剪不规则形状的图像。我看到了ios的应用程序，他们已经用BezierPath做了，有没有什么东西可以和安卓的BezierPath一样工作，请建议一些替代方法，我该怎么做？

浏览 5提问于2013-10-25得票数 0

1回答

我有一个简单的SVG元素(一个圆)，并应用了湍流和位移图过滤器，以创建水的效果。我还应用了一个遮罩，它隐藏了形状的一部分。问题是:即使在蒙版的黑色区域中，形状的部分仍然显示:过滤器导致图像在某些区域扩展到其正常边界之外，而这些区域甚至出现在应该被蒙版的区域中。此问题仅存在于Chrome和Chromium中，而不存在于Firefox中。这个问题可以在操作中看到。问题中的对象是底部的红色圆圈</

浏览 5提问于2020-12-13得票数 0

4回答

选择正确的技术(SVG与Canvas)

javascript、canvas、svg、raphael

我正在写一个用于形状处理的应用程序，这样在创建简单的形状之后，用户可以通过相互剪裁形状来创建更复杂的形状(即使用单个路径而不是一组将两个圆圈组合成存储在一起的图8，或者执行两个圆圈的交集来创建一个“咬合SVG似乎处理了我需要的80%的开箱即用功能(形状存储、移动、旋转、缩放)。问题是，如果不在我自己的模块中重新创建SVG功能，其他20% (使用裁

浏览 2提问于2010-07-01得票数 4

1回答

kivy将文本剪切成不规则形状

python、kivy

由于画布说明模板和剪刀(似乎有相同的效果)是用来创建蒙版，并在其上绘制，我想知道有一个可以达到这个效果：在背景图像上绘制任何形状(到目前为止很容易)。然后将文本从形状中剪切出来，以便在背景中查看。

浏览 23提问于2020-05-14得票数 0

回答已采纳

1回答

在Swift中实现UIImage图形的擦除/恢复

ios、swift、uiimage、drawing、core-graphics

我正在尝试制作一个简单的图像橡皮擦工具，用户可以在绘制图像时进行擦除和恢复，就像下面的图像一样：经过多次尝试和测试，我已经在UI端使用以下代码实现了足够的“擦除”功能： imageView.image = capturedImage在用户触摸时本质上，用户应该在擦除的部分上绘制，

浏览 22提问于2021-05-26得票数 1

4回答

使用CSS3仅显示部分背景图像

image、background、css、mask

在使用CSS3时，是否可以只显示背景暗淡图像的一部分？我想用一张图片作为背景，但只显示其中的一半，那么有没有像遮罩这样的东西可以为你的背景模糊图像定义呢？

浏览 0提问于2010-06-15得票数 0

回答已采纳

1回答

擦除部分图像iOS

ios、objective-c、image

出于测试目的，我只使用了一个100 x 100像素的红色正方形。除了将每个像素存储在2D数组中并以这种方式处理之外，我不确定我将如何做到这一点。不过，在最终的实现中，图像将比100像素大得多，所以这看起来效率很低，并且会消耗大量的内存。

浏览 2提问于2016-01-05得票数 0

1回答

在OpenGL中创建两个掩码图像的“并集”

opengl、libgdx、blending、stencil-buffer

对于当前的2D项目，我在场景中渲染不同的对象。在此基础上，我渲染具有剪切部分的图像，例如黑色图像上的一个透明圆圈。当移动切出的圆时，这产生了这样的效果，当然只有在透明部分，背景对象是可见的。现在我想添加第二个遮罩层，在它上面有一个不同的透明形状，并创建这两个层的联合，显示每个透明部分下面的背景图像。下图显示了一个示例插图：对于渲染，我使用带有OpenGL 2.0的libgdx和scene2d作为场景

浏览 4提问于2019-07-16得票数 0

3回答

Raphaël.js中的剪辑路径

javascript、html、raphael、vector-graphics、clip

像这样的，如何在Raphaël.js中使用clip-path？它认为Raphael.js中只有clip-rect。

浏览 0提问于2012-01-26得票数 5

回答已采纳

3回答

Can -webkit-mask在一个元素上工作(例如，div)

html、webkit、css

尝试在div上使用一些CSS，并将其掩蔽为特定的形状。其概念是创建一个div，将该div掩蔽成一个形状(比如一个人的轮廓)，并对该div应用一些背景css渐变。我一直在尝试使用-webkit-mask (如下所示：)，但似乎无法在div/span/任何目录上使用它有人做过类似的事吗？B

浏览 1提问于2011-03-22得票数 2

1回答

React Native SVG* Mask子项未转换*

react-native、svg、expo、mask

我在一个可缩放的图像上画了几个圆圈。我希望这些圆是孔视图，这样这些孔就会突出显示它后面的图像。因此，我使用蒙版绘制矩形以使图像变暗，然后绘制圆形以突出显示图像的某些部分。我将蒙版和矩形组合在一起，并对蒙版进行变换。当图像没有放大时，一切都是完美的。当我放大和平移图像时，圆圈停留在它们应该停留的位置，但背景矩形不会从变换中平移。<Svg height={imageDet

浏览 0提问于2020-11-18得票数 0

1回答

如何创建带透明文本的SVG？

svg

我正在尝试创建一个透明文本的svg按钮。看起来在原生React中很难做到这一点，所以也许我只需要创建一个svg，它将具有透明的文本。我该怎么做？我尝试过在Figma中这样做，但看起来唯一的方法就是把一个特定的图像放在后面。文本不可能是真正透明的，它只能遮蔽图片。 ?

浏览 60提问于2021-07-29得票数 1

回答已采纳

1回答

如何在CGContext上分层

iphone、ios、xcode、core-graphics

为了成功地保存带有蒙版的图像，我使用了一些变通方法(因为您不能使用CoreAction渲染蒙版)。CGBitmapContextCreateImage(context);因此这很有效，蒙版在目标图像中剪切出其形状之外的所有东西

浏览 1提问于2012-03-09得票数 0

回答已采纳

1回答

从图像裁剪一个三角形，并将其放置在原始图像CSS的下方

javascript、html、css

我正在尝试使用HTML/CSS来实现此效果：到目前为止，我拥有的是这个position: relative;width: 100%;

浏览 1提问于2015-01-27得票数 0

点击加载更多