Introduction#
本章介绍了SVG的声明式滤镜效果功能集，当与SVG的二维图形能力结合时，可以以一种方式描述Web上常见的许多艺术作品，使得客户端生成和修改变得容易。此外，将滤镜效果应用于SVG图形元素和容器元素，有助于保持文档的语义结构，而不是使用图像，因为图像通常具有固定的分辨率，并且往往会掩盖它们所替代元素的原始语义。这在应用于文本的效果时尤为显著。
滤镜效果是通过 filter 元素定义的。要将滤镜效果应用于 图形元素 或 容器元素 ，您需要在给定元素上设置 filter 属性的值，使其引用滤镜效果。
This chapter describes SVG’s declarative filter effects feature set, which when combined with the 2D power of SVG can describe much of the common artwork on the Web in such a way that client-side generation and alteration can be performed easily. In addition, the ability to apply filter effects to SVG graphics elements and container elements helps to maintain the semantic structure of the document, instead of resorting to images which aside from generally being a fixed resolution tend to obscure the original semantics of the elements they replace. This is especially true for effects applied to text.
Filter effects are defined by filter elements. To apply a filter effect to a graphics element or a container element, you set the value of the filter property on the given element such that it references the filter effect.
Filter Element#
- class svgwrite.filters.Filter(start=None, size=None, resolution=None, inherit=None, **extra)#
The filter element is a container element for filter primitives, and also a factory for filter primitives.
Parent Classes#
Methods#
- Filter.__init__(start=None, size=None, resolution=None, inherit=None, **extra)#
- 参数:
start (2-tuple) – defines the start point of the filter effects region (x, y)
size (2-tuple) – defines the size of the filter effects region (width, height)
resolution – takes the form
'x-pixels [y-pixels]', and indicates the width and height of the intermediate images in pixels.inherit – inherits properties from Filter inherit see: xlink:href
- Filter.feBlend(in_, start=None, size=None, \*\*extra)#
create and add a feBlend 滤镜元素
- Filter.feColorMatrix(in_, start=None, size=None, \*\*extra)#
create and add a feColorMatrix 滤镜元素
- Filter.feComponentTransfer(in_, start=None, size=None, \*\*extra)#
create and add a feComponentTransfer 滤镜元素
- Filter.feComposite(in_, start=None, size=None, \*\*extra)#
create and add a feComposite 滤镜元素
- Filter.feConvolveMatrix(in_, start=None, size=None, \*\*extra)#
create and add a feConvolveMatrix 滤镜元素
- Filter.feDiffuseLighting(in_, start=None, size=None, \*\*extra)#
create and add a feDiffuseLighting 滤镜元素
- Filter.feDisplacementMap(in_, start=None, size=None, \*\*extra)#
create and add a feDisplacementMap 滤镜元素
- Filter.feFlood(start=None, size=None, \*\*extra)#
create and add a feFlood 滤镜元素
- Filter.feGaussianBlur(in_, start=None, size=None, \*\*extra)#
create and add a feGaussianBlur 滤镜元素
- Filter.feImage(href, start=None, size=None, \*\*extra)#
create and add a feImage 滤镜元素
- Filter.feMerge(start=None, size=None, \*\*extra)#
create and add a feMerge 滤镜元素
- Filter.feMorphology(in_, start=None, size=None, \*\*extra)#
create and add a feMorphology 滤镜元素
- Filter.feOffset(in_, start=None, size=None, \*\*extra)#
create and add a feOffset 滤镜元素
- Filter.feSpecularLighting(in_, start=None, size=None, \*\*extra)#
create and add a feSpecularLighting 滤镜元素
- Filter.feTile(in_, start=None, size=None, \*\*extra)#
create and add a feTile 滤镜元素
- Filter.feTurbulence(start=None, size=None, \*\*extra)#
create and add a feTurbulence 滤镜元素
SVG Attributes#
filterUnits –
'userSpaceOnUse | objectBoundingBox'primitiveUnits –
'userSpaceOnUse | objectBoundingBox'指定滤镜原语内部各种长度值的坐标系统，以及定义滤镜原语子区域的属性。如果 primitiveUnits =
'userSpaceOnUse'，则滤镜定义中的任何长度值都代表当前用户坐标系统中的值，这个坐标系统在引用 filter 元素时存在（即引用 filter 元素的元素的用户坐标系统，通过 filter 属性引用）。如果 primitiveUnits =
'objectBoundingBox'，则滤镜定义中的任何长度值都代表引用元素的边界框的分数或百分比（参见对象边界框单位）。请注意，如果在 <number-optional-number> 值中只指定了一个数字，那么这个数字会在进行 primitiveUnits 计算之前进行扩展。如果没有指定 primitiveUnits 属性，则效果相当于指定了``’userSpaceOnUse’``。
x – <coordinate> – start 参数
y – <coordinate> – start 参数
width – <length> – size 参数
height – <length> – size 参数
filterRes – <number-optional-number> – resolution 参数
xlink:href – <iri> – inherit 参数
指向当前SVG文档片段中另一个 filter 元素的IRI引用。任何在引用的 filter 元素中定义，但在此元素中未定义的属性，都将由此元素继承。
filterUnits –
'userSpaceOnUse | objectBoundingBox'primitiveUnits –
'userSpaceOnUse | objectBoundingBox'Specifies the coordinate system for the various length values within the filter primitives and for the attributes that define the filter primitive subregion.If primitiveUnits =
'userSpaceOnUse', any length values within the filter definitions represent values in the current user coordinate system in place at the time when the filter element is referenced (i.e., the user coordinate system for the element referencing the filter element via a filter property).If primitiveUnits =
'objectBoundingBox', then any length values within the filter definitions represent fractions or percentages of the bounding box on the referencing element (see Object bounding box units). Note that if only one number was specified in a <number-optional-number> value this number is expanded out before the primitiveUnits computation takes place.If attribute primitiveUnits is not specified, then the effect is as if a value of
'userSpaceOnUse'were specified.x – <coordinate> – start parameter
y – <coordinate> – start parameter
width – <length> – size parameter
height – <length> – size parameter
filterRes – <number-optional-number> – resolution parameter
xlink:href – <iri> – inherit parameter
A IRI reference to another filter element within the current SVG document fragment. Any attributes which are defined on the referenced filter element which are not defined on this element are inherited by this element.
Standard SVG Attributes#
Example#
import sys
from pathlib import Path
sys.path.insert(0, str(Path(__file__).resolve().parent.parent))
import svgwrite
dwg = svgwrite.Drawing("fePointLight.svg")
filtr = dwg.defs.add(
dwg.filter(id="DL", start=(0, 0), size=(500, 500),
filterUnits="userSpaceOnUse"))
diffuse_lighting = filtr.feDiffuseLighting(
start=(0, 0), size=(500, 500),
surfaceScale=10,
diffuseConstant=1,
kernelUnitLength=1,
lighting_color="#f8f")
point_light = diffuse_lighting.fePointLight( (500, 250, 250) )
point_light.add(
dwg.animate('x',
values=(0,100,500,100,0),
dur='30s',
repeatDur='indefinite'))
point_light.add(
dwg.animate('y',
values=(0,500,400,-100,0),
dur='31s',
repeatDur='indefinite'))
point_light.add(
dwg.animate('z',
values=(0,1000,500,-100,0),
dur='37s',
repeatDur='indefinite'))
dwg.save()
and the XML result (with manual reformatting):
<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="100%" version="1.1" width="100%"
xmlns="http://www.w3.org/2000/svg"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="DL" filterUnits="userSpaceOnUse"
x="0" y="0" width="500" height="500" >
<feDiffuseLighting diffuseConstant="1"
x="0" y="0" width="500" height="500"
in="SourceGraphic"
kernelUnitLength="1"
lighting-color="#f8f"
surfaceScale="10">
<fePointLight x="500" y="250" z="250">
<animate attributeName="x"
dur="30s"
repeatDur="indefinite"
values="0;100;500;100;0" />
<animate attributeName="y"
dur="31s"
repeatDur="indefinite"
values="0;500;400;-100;0" />
<animate attributeName="z"
dur="37s"
repeatDur="indefinite"
values="0;1000;500;-100;0" />
</fePointLight>
</feDiffuseLighting>
</filter>
</defs>
</svg>