svg嵌套svg_使用SVG掩盖效果
svg嵌套svg
探索SVG第3部分(EXPLORING SVG PART 3)
This is an advanced article about SVG. Here we are discussing two main concepts of SVG, those are clip-path and mask. It is used for hiding some a portion of an image and unhiding the other portion. There are lots of use cases of these such as Making image as the background for a text, Applying background texture effect, Making patterns to an object… etc.
这是有关SVG的高级文章。 在这里，我们讨论SVG的两个主要概念，即剪切路径和遮罩。 它用于隐藏图像的某些部分而不隐藏其他部分。 这些有很多用例，例如将图像制作为文本的背景，应用背景纹理效果，对对象制作图案等。
Let's get it started.
让我们开始吧。
There are two main ways to implement masking on SVG. One is using clip-path, another one is using a mask. Let's discuss both in detail.
在SVG上实现屏蔽的主要方法有两种。 一种使用剪切路径，另一种使用遮罩。 让我们详细讨论两者。
剪切路径 (clip-path)
The clip-path is mainly used to hiding a portion of an image based on another path. For making a clip-path, First need to define the path by using <clipPath> annotation then apply that clip-path to an element using the style attribute clip-path.
剪切路径主要用于基于另一条路径隐藏图像的一部分。 为了创建剪切路径，首先需要使用<clipPath>批注定义路径，然后使用样式属性clip-path将该剪切路径应用于元素。
Let's do some examples using clip-path. It will make more clarity about the concept.
让我们使用剪切路径做一些例子。 这将使该概念更加清晰。
<!DOCTYPE html>
<html lang="en">
<body><svg width="300" height="300"><defs><clipPath id="clip-rectangle"><circle cx="170" cy="150" r="120"></circle> </clipPath></defs><path d="M 100 0 L175 200 L0 75 L200 75 L25 200 Z" style="stroke:#0a7a0a; fill:#1e9b2f; clip-path: url(#clip-rectangle);"></path></svg>
</body>
</html>The output of the above example looks like follows.
上面示例的输出如下所示。
In the output you can see, it is creating a star but only a portion of the start is showing, which is the circle covering a portion of the star and the remaining portion is hidden from the view.
在您可以看到的输出中，它正在创建星形，但是仅显示起点的一部分，该圆圈是覆盖星形的一部分的圆，其余部分从视图中隐藏了。
Here it only outputs the portion which meeting the clip-path and the image.
在这里，它仅输出满足剪切路径和图像的部分。
Another way that implementing a clip-path is by using the <use> tag.
实现剪切路径的另一种方法是使用<use>标记。
<!DOCTYPE html>
<html lang="en">
<body><svg width="900" height="900"><clipPath id="clip-circle"><circle cx="170" cy="150" r="80"></circle> </clipPath><path id="heart-path" d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,254.6c-15.8-16.6-25.6-39.1-25.6-63.9c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4 z"/><use clip-path="url(#clip-circle)" xlink:href="#heart-path" fill="green" /></svg>
</body>
</html>In the above code snippet, it makes the circle and heart path separately. Using the <use> tag it is mentioned the circle is clipped by heart.
在上面的代码片段中，它分别使圆圈和心脏路径。 提到使用<use>标记，圆圈被心脏剪断了。
Also the similar way, it is able to apply the clip-path for a group of elements.
同样，它也可以为一组元素应用剪切路径。
These are the key things about clip-path. Now let's see how to make patterns in SVG.
这些是有关剪切路径的关键内容。 现在让我们看看如何在SVG中制作图案。
模式 (Pattern)
It is able to make patterns by using SVG. <pattern> tag is used for defining a pattern. The advantage of the pattern is it will be repeated throughout the x and y coordinates and cover the entire area.
它可以使用SVG制作图案。 <pattern>标记用于定义模式。 该图案的优点是它将在x和y坐标中重复并覆盖整个区域。
Let's create an example with the combination of pattern and clip-path. Here we are creating a simple pattern which contains a set of circles which repeated over a text
让我们结合模式和剪切路径创建一个示例。 在这里，我们正在创建一个简单的模式，其中包含一组在文本上重复的圆圈
<!DOCTYPE html>
<html lang="en">
<body><svg width="3000" height="800"><defs><clipPath id="clip-rectangle"><text x="20" y="400" style="font-size: 300px; ">HELLO MEDIUM</text> </clipPath></defs><pattern id="pattern-circles" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="5" fill="green"/></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)" style="clip-path: url(#clip-rectangle);" /></svg>
</body>
</html>In the above code snippet, it makes a rectangle with the same height and width of SVG canvas and is filled with the created circle pattern. Then in the rectangle applied text clip-path. Which results the text backgrounded with patterns.
在上面的代码片段中，它制作了一个与SVG画布具有相同高度和宽度的矩形，并用创建的圆形图案填充。 然后在矩形中应用文本剪切路径。 这导致文本带有图案作为背景。
The output of the above code snippet looks like below.
上面的代码片段的输出如下所示。
面具 (Mask)
Now let's move on to another masking features of SVG called Mask.
现在，让我们继续进行SVG的另一种遮罩功能，即“遮罩”。
We can say Mask is an advanced clip-path. With the help of Mask, it can make elements with various transparency level.
可以说Mask是高级的剪切路径。 借助Mask，它可以使元素具有各种透明度。
the Mask can be defined between <mask></mask> tags and can apply the mask using the mask style attribute.
可以在<mask> </ mask>标签之间定义Mask，并可以使用mask style属性应用该Mask。
Here follow some simple examples of masking.
下面是一些简单的蒙版示例。
First, let's implement our first clip-path example using the Mask.
首先，让我们使用Mask实现第一个剪辑路径示例。
<!DOCTYPE html>
<html lang="en">
<body><svg width="300" height="300"><defs><mask id="clip-rectangle"><circle cx="170" cy="150" r="120" fill="#fff"></circle> </mask></defs><path d="M 100 0 L175 200 L0 75 L200 75 L25 200 Z" style="stroke:#0a7a0a; fill:#1e9b2f; mask: url(#clip-rectangle);"></path></svg>
</body>
</html>Here I just replaced all the clip-path annotation with mask and specify the mask using the ‘mask’ style attribute. One thing you want to note here is I added a fill attribute for the masking circle and filled it with white colour.
在这里，我只是用mask替换了所有剪切路径注释，并使用'mask'样式属性指定了mask。 您要在此处注意的一件事是，我为遮罩圆添加了fill属性，并用白色填充了它。
The output of the above snippet looks like follows.
以上代码段的输出如下所示。
If you change the colour of the masking circle from white to some other colour then the opacity becomes changes based on the colour intensity. The masking object colour defines the displaying object opacity. If the object colour is black then it won't display the image because the displaying object opacity becomes zero.
如果将遮罩圈的颜色从白色更改为其他颜色，则不透明度将根据颜色强度而变化。 遮罩对象的颜色定义了显示对象的不透明度。 如果对象颜色为黑色，则由于显示的对象不透明度变为零，因此将不会显示图像。
The masking colour represents how transparent is the displaying object. Let's make an example by changing the circle colour to #666. Now you can see the image opacity changed based on the mask colour. this is one of the additional features of the mask as compared to clip-path.
遮罩颜色表示显示对象的透明度。 让我们通过将圆圈颜色更改为＃666来举例。 现在，您可以看到图像的不透明度根据蒙版颜色而改变。 与剪切路径相比，这是蒙版的其他功能之一。
<!DOCTYPE html>
<html lang="en">
<body><svg width="300" height="300"><defs><mask id="clip-rectangle"><circle cx="170" cy="150" r="120" fill="#666"></circle> </mask></defs><path d="M 100 0 L175 200 L0 75 L200 75 L25 200 Z" style="stroke:#ffe800; fill:#FFF58F; mask: url(#clip-rectangle);"></path></svg>
</body>
</html>The output of the above code snippet looks like below.
上面的代码片段的输出如下所示。
It is also able to make gradient masks. By changing the gradient colour, the opacity of the masking layer changes according to that.
它还能够制作渐变蒙版。 通过更改渐变颜色，遮罩层的不透明度会随之改变。
<!DOCTYPE html>
<html lang="en">
<body><svg width="300" height="300"><defs><linearGradient id="gradient1"x1="0%" y1="0%"x2="100%" y2="0%"spreadMethod="pad"><stop offset="0%" stop-color="#ffffff" stop-opacity="1"/><stop offset="100%" stop-color="#000000" stop-opacity="1"/></linearGradient><mask id="clip-rectangle"><circle cx="170" cy="150" r="120" fill="url(#gradient1)"></circle> </mask></defs><path d="M 100 0 L175 200 L0 75 L200 75 L25 200 Z" style="stroke:#660549; fill:#72137a; mask: url(#clip-rectangle);"></path></svg>
</body>
</html>The above will make the star with gradient. Below picture explains how this output created.
以上将使恒星具有渐变感。 下图说明了如何创建此输出。
Similarly, it is able to apply mask on text background like below
同样，它可以在文本背景上应用遮罩，如下所示
<!DOCTYPE html>
<html lang="en">
<body><svg width="2000" height="300"><defs> <pattern id="pattern-1" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse"> <circle cx="5" cy="5" r="5" fill="#fff" /> </pattern><mask id="text-mask-2" x="0" y="0" width="100" height="100"> <text x="30" y="140" font-family="Helvetica" font-weight="bold" font-size="7em" fill="url(#pattern-1)">JAVAREVISITED</text> </mask> </defs><image width="1000" height="595" xlink:href="garden.jpg" mask="url(#text-mask-2)"/> </svg>
</body>
</html>Here the output of above code snippet looks like follows.
上面的代码片段的输出如下所示。
翻译自: https://medium.com/javarevisited/masking-effect-using-svg-8c8752feae38
svg嵌套svg
http://www.taodudu.cc/news/show-4673497.html
相关文章：
- SVG 绘制矩形
- SVG常用的属性
- svg样式属性
- 插件--SVG
- svg标记marker
- svg属性d用法
- svg详解
- SVG 画图
- svg教程
- SVG 入门指南(初学者入门必备)
- 腾讯公司市值4635亿美元，重回全球上市公司市值榜第八名
- 苹果市值还是第一，但似乎有些脆弱
- Rust 2018 调查报告发布；微软超越苹果成为全球市值最大公司
- 全球首个3万亿美元公司！苹果实现全球最高市值里程碑
- 华为上诉失败，被禁止在瑞典销售 5G 设备；苹果公司市值重获全球第一；Deno 完成 2100 万美元 A 轮融资|极客头条
- 苹果公司的创始人_如果拥有苹果公司10%的股份，能成为世界首富吗？
- 重磅！苹果公司市值首次突破9000亿美元大关
- 口碑问答营销推广如何做？广告联盟同样需要
- 产业分析：平台经济是什么
- 软件测试面试问答
- JAVA面试问答 NOTE2
- Android面试问答
- CSDN问答——测评
- 知乎问答项目
- MySQL所有问答题
- JAVA开源仿知乎问答源码
- 南京邮电大学2013年硕士研究生招生复试及同等学力加试参考书目
- 怎样将.flt文件转换为.ive文件？
- 虚拟机VirtualBox启动虚拟机报Only Ethernet Adapter' (VERR_INTNET_FLT_IF_NOT_FOUND).
- VirtualBox中重建Host-Only网卡后无法启动虚拟机(VERR_INTNET_FLT_IF_NOT_FOUND)
svg嵌套svg_使用SVG掩盖效果相关推荐
- css 霓虹灯转动效果,使用SVG + CSS实现动态霓虹灯文字效果
早上无意间进入一个网站,看到他们的LOGO效果略屌,如图: 刚开始以为是gif动画之类的,审查元素发现居然是用SVG + CSS3动画实现的,顿时激起了我的(hao)欲(qi)望(xin),决定要一探 ...
- svg波纹_使用SVG创建材质设计波纹效果
svg波纹 View demo 查看演示Download Source 下载源 With the advent of Google's Material Design came a visual la ...
- ui svg 转纯svg_带有SVG和边框图像的高科技UI元素
ui svg 转纯svg It's uncertain when the design motif originated - perhaps with the original 1980's Batt ...
- react 使用 svg_使用SVG和React.js构建日历热图
react 使用 svg 跳舞语法 (Dancing Syntax) 介绍 (Introduction) In 2016, I had put my academic plans on hold af ...
- 突袭HTML5之SVG 2D入门1 - SVG综述
位图与矢量图 以前,浏览器中显示的图形,例如jpeg.gif等,都是位图,这些图像格式是基于光栅的.在光栅图像中,图像文件定义了图像中每个像素的颜色值.浏览器需要读取这些值并做出相应行动.这种图像的再 ...
- html5 css svg,6款基于SVG的HTML5CSS3应用和动画
1.CSS3/SVG质感背景小图标 镂空效果图标按钮 今天我们来分享一款用CSS3和SVG实现的质感背景小图标,鼠标滑过图标时出现镂空的效果,并且有质感背景的描边,效果非常不错. 2.HTML5 SV ...
- svg载入html,SVG系列教程：SVG简介与嵌入HTML页面的方式
随着技术向前的推进,SVG相关的讨论也越渐频繁.为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中.从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程.译文或案例等 ...
- 如何使用CSS来修改SVG原点和制作SVG动画
SVG元素可以像HTML元素一样,使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果. SVG元素可以像HTML元素一样,使用CSS keyfr ...
- SVG 教程 （六）SVG 阴影，SVG 渐变 - 线性，SVG 渐变- 放射性
SVG 阴影 注意: Internet Explorer和Safari不支持SVG滤镜! <defs> 和 <filter> 所有互联网的SVG滤镜定义在<defs> ...
最新文章
- xshell 关闭后保持程序运行
- C ++ 11基于反向范围的for循环
- [导入]看图说话，编写VS2005插件，增强VS2005 IDE
- element菜单默认展开和选中
- ●BZOJ 1934 [Shoi2007]Vote 善意的投票
- 苹果10亿美元收购英特尔手机基带业务 买下一颗iPhone“定芯丸”
- HDU 1022 Train Problem I stack 基础题
- centos7+mysql5.7二进制安装
- Tensorflow2.0.0版本和Keras2.4.3不兼容
- sa linux,sa | 搜索结果 | Linux运维部落
- 将GridView数据导出到Excel实现
- 查找计算机的dos,dos命令dir查找文件的用法及实例
- MFC--获取字符串的像素尺寸
- 算术练习题（java）
- apache kafka 简介
- 发布文章出现请勿使用默认标题
- 深度伪造检测论文 · Combining EfficientNet and Vision Transformers for Video Deepfake Detection
- 职场新人应该如何培养项目管理的能力？
- 2021SC@SDUSC HBase(十三)项目代码分析——WAL写入
- 音视频传输-之RTP/RTCP协议