使⽤SVG⽣成页⾯⽔印
There are two kinds of watermarks regularly used in web development:
Web开发中经常使⽤两种⽔印：
1. Page watermarks, used to enhance brand awareness.
页⾯⽔印，⽤于增强品牌知名度。
2. Image and video watermarks, used to declare ownership and protect copyright.
图像和视频⽔印，⽤于声明所有权和保护版权。
This article shows how to create page watermarks: specifically, text (or logos) on a diagonal.
本⽂介绍了如何创建页⾯⽔印：特别是在对⾓线上的⽂本(或徽标)。
SVG⽂字⽔印 (SVG Text Watermarks)
I’ve previously tackled the issue of presenting . My earlier solution used PNG images, but it’s much more effective to create a SVG with the .
我以前已经解决过中显⽰的问题。 我较早的解决⽅案使⽤PNG图像，但是使⽤的创建SVG更为有效。
A single-line example would be:
单⾏⽰例为：
<svg xmlns="/2000/svg" width="100%" height="100%">
<defs>
<pattern id="textstripe" patternUnits="userSpaceOnUse" width="400" height="200" patternTransform="rotate(-45)">
<text y="30" font-family="Avenir" font-size="40">DUDLEY STOREY</text>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#textstripe)" />ae能做svg动画吗
</svg>
I’ll discuss the <text> element in more detail in a future article; for now, note that the <pattern> area is wider than it is high, and that the text has been moved down slightly. This produces:
我将在以后的⽂章中详细讨论<text>元素。 现在，请注意<pattern>区域的宽度⼤于其⾼度，并且⽂本已略微向下移动。 这将产⽣：
添加⽂字 (Adding Subtext)
Introducing another line into the watermark between the previous text is achieved by adding a second pattern, with a third merging both patterns into one:
通过添加第⼆个模式，在第三个⽂本之间的⽔印中添加另⼀⾏，第三个模式将两个模式合并为⼀个：
<svg xmlns="/2000/svg" width="100%" height="100%">
<style type="text/css">
text { fill: gray; font-family: Avenir; }
</style>
<defs>
<pattern id="twitterhandle" patternUnits="userSpaceOnUse" width="400" height="200">
<text y="30" font-size="40" id="name">@dudleystorey</text>
</pattern>
<pattern xlink:href="#twitterhandle">
<text y="120" x="200" font-size="30" id="occupation">web developer</text>
</pattern>
<pattern id="combo" xlink:href="#twitterhandle" patternTransform="rotate(-45)">
<use xlink:href="#name" />
<use xlink:href="#occupation" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#combo)" />
</svg>
The result is the initial state of the background image you see at the top of this article.
结果是您在本⽂顶部看到的背景图像的初始状态。
By building up patterns in this way, it’s possible to construct complex backgrounds from basic components with relatively little effort… and the text remains completely live and editable, as you can see by using the form built into the demo.
通过以这种⽅式建⽴模式，就可以⽤较少的精⼒从基本组件构建复杂的背景……并且⽂本仍然是完全实时的且可编辑的，正如您使⽤演⽰中内置的表格所看到的那样。
Note that the code above has been kept clean by following a few SVG best practices:
请注意，上⾯的代码通过遵循⼀些SVG最佳实践来保持⼲净：
1. Presentation attributes have been turned into , where appropriate.
表⽰属性已在适当的地⽅变成了 。
2. The second and third patterns reference the first via an xlink, inheriting the original’s patternUnits, width and height.
第⼆个和第三个模式通过xlink引⽤第⼀个，继承了原始模式的patternUnits ， width和height 。
3. The transform has been left for the last pattern, rather than repeating the rotation.
变换留给了最后⼀个样式，⽽不是重复旋转。
The demo at the top of this page makes the text dynamic; under normal circumstances, your desired watermark text (and choice of font, color, etc) would be hard-coded into the SVG, which would then be referenced as a background-image.
此页⾯顶部的演⽰使⽂本动态化。 在正常情况下，您想要的⽔印⽂本(以及字体，颜⾊等的选择)将被硬编码到SVG中，然后将其称
为background-image 。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。