sketch打开svg蒙版_SVG文本剪贴蒙版

sketch打开svg蒙版

The concept of a clipping mask is simple: a shape is used to constrain an image, such that the picture is only visible within the confines of the shape, creating a “cookie-cutter” effect.

剪贴蒙版的概念很简单：使用形状来约束图像，以使图片仅在形状范围内可见，从而产生“切饼干”效果。

The Webkit team has a CSS proposal to achieve this, but it’s not yet supported in browsers outside of Safari and Chrome. I wanted a solution that would work cross-browser, even in IE9.

Webkit团队提出了实现这一目标CSS提案 ，但Safari和Chrome之外的浏览器尚不支持它。 我想要一个即使在IE9中也可以跨浏览器使用的解决方案。

The SVG spec has supported clipping masks for years. Building on what we know of SVG text, it’s pretty easy to integrate a solution.

SVG规范多年来一直支持剪切蒙版。 基于我们对SVG文本的了解，很容易集成解决方案。

First, place your image on the page. For all intents and purposes this will be your “background” image, which will show through the clipping mask.

首先，将您的图片放在页面上。 出于所有目的和目的，这将是您的“背景”图像，它将通过剪贴蒙版显示。

<img src="yukon-river.jpg" alt="Knockout" id="knockout-text">

There are just two conditions for this image: it must be large enough to contain our text, and it must have an id value, which will be referenced in the CSS we will write shortly.

该图像只有两个条件：它必须足够大以包含我们的文本，并且它必须具有一个id值，我们将在稍后编写的CSS中对其进行引用。

Next, we’ll create our SVG file. This will be a separate document named knockout.svg, with a simple structure:

接下来，我们将创建SVG文件。 这将是一个单独的文档，名称为knockout.svg ，结构简单：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<style>
			text { 
				font-size:120px;
				font-family: Blue Highway, Arial Black, sans-serif;
				fill: white;
			}
		</style>
		<mask id="mask">
			<text y="100" id="knockout">KNOCKOUT</text>
		</mask>
	</defs>
  <use xlink:href="#knockout"/>
</svg>

Concentrate on the <text> element: the x and y values are the offset positions for the text, and the fill is the color for the letters. (This must be specified, even though we are showing our image through the letters). The font(s) we wish to use are written in an inline style, exactly as we do in CSS.

专注于<text>元素： x和y值是文本的偏移位置，填充是字母的颜色。 (即使我们通过字母显示图像，也必须指定此项)。 我们希望使用的字体以内联样式编写，就像我们在CSS中一样。

The part that is different is the <defs> and <mask> elements around our text. Very simply, this will allow use to specify the fact that we should use the text as a mask (note that the mask has an id). The penultimate line: <use xlink:href="#knockout"/> references the id provided to the text.

不同之处在于文本周围的<defs>和<mask>元素。 很简单，这将允许您指定我们应该将文本用作遮罩的事实(请注意，遮罩具有id )。 倒数第二行： <use xlink:href="#knockout"/>引用提供给文本的id 。

提示 (Tips)

Try to use a large image while specifying a thick, black, heavy stroke font of a fairly large size (measured in pixels, due to its relationship to the image) for the picture to show through.

尝试使用较大的图像，同时指定较大的粗细，黑色，粗线字体(以像素为单位，由于与图像的关系，以像素为单位)，以使图片显示出来。

Finally, marry the SVG to our HTML content with CSS:

最后，将SVG与我们HTML内容与CSS结合起来：

#knockout-text {
	mask: url(knockout.svg#mask);
	-webkit-mask-image: url(knockout.svg);
}

The mask CSS property, used by Firefox, Opera and IE, refers to <mask id="mask"> in the knockout.svg file. Chrome and Safari need the second line, which pick up the mask where it is in specified in the file.

由Firefox，Opera和IE使用的mask CSS属性引用了kickout.svg文件中的<mask id="mask"> 。 Chrome和Safari需要第二行，以选择文件中指定位置的遮罩。

“But,” you might say, “How can I know that what you’re showing here is such an effect? It looks just like a picture!”

“但是，”您可能会说，“我怎么知道您在这里显示的是这种效果？ 看起来就像一张照片！”

Indeed, that’s true: you’ll find that you can’t select the “KNOCKOUT” at the top of this article as text. But if you drag the element to your desktop, you’ll see that it saves as an image: removed from the clipping mask effect, you’ll see the entire landscape. And as I’ll show you shortly, you can edit the text in the SVG document to be anything you want… which is far quicker than going through PhotoShop.

确实，这是真的：您会发现您无法选择本文顶部的“ KNOCKOUT”作为文本。 但是，如果将元素拖动到桌面，则会看到它另存为图像：从剪贴蒙版效果中删除后，您将看到整个景观。 正如我不久将向您展示的，您可以将SVG文档中的文本编辑为所需的任何内容，这比通过PhotoShop进行操作要快得多。

翻译自: https://thenewcode.com/481/Text-Clipping-Masks-With-SVG

sketch打开svg蒙版