非常教程

SVG参考手册

属性 | Attributes

in

in属性标识给定的滤镜基元的输入。

该值可以是以下定义的六个关键字中的一个,也可以是与同一<filter>元素中的先前的result属性值相匹配的字符串。如果没有提供值,并且这是第一个滤镜基元,那么此滤镜基元将SourceGraphic用作其输入。如果没有提供值并且这是一个后续的滤镜基元,那么这个滤镜基元将使用来自前一个过滤器基元的结果作为其输入。

如果result的值在给定<filter>元素中多次出现,那么给定result属性的值,对该result的引用将使用最近的前一个滤镜基元。

用法上下文

Categories

None

Value

SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>

Animatable

Yes

Normative document

SVG 1.1 (2nd Edition)

SourceGraphic——此关键字代表初始输入到<filter>元素中的图形元素。

SourceAlpha——此关键字代表初始输入到<filter>元素中的图形元素。除了只使用alpha通道之外,SourceAlpha其他规则与SourceGraphic都是一样的。

BackgroundImage——该关键字代表<filter>调用该元素时过滤区域下的SVG文档的图像快照。BackgroundAlpha ——除了了只使用alpha通道之外,其他规则与BackgroundImage相同。

FillPaint——此关键字表示过滤器效果的目标元素上的fill属性的值。在很多情况下,FillPaint在任何地方都是不透明的,但是如果一个形状是用渐变或者图案(其本身包括透明或者半透明的部分)来绘制的话,情况就不一样了。

StrokePaint——此关键字表示过滤器效果的目标元素上的stroke属性值。在很多情况下,它们在StrokePaint任何地方都是不透明的,但是如果一个形状是用渐变或图案(其本身包括透明或半透明的部分)进行绘制,则可能不是这种情况。

对于BackgroundImage的解决方法

正确的做法是使用一个<feImage> 元素,导入其中一个图像并将它混合在过滤器本身,而不是使用in="BackgroundImage"

HTML内容

<div style="width: 420px; height: 220px;">
<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="backgroundMultiply">
      <!-- This will not work. -->
      <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/>
    </filter>
  </defs>
  <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" />
</svg>

<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageMultiply">
      <!-- This is a workaround. -->
      <feImage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
      <feBlend in2="SourceGraphic" mode="multiply"/>
    </filter>
  </defs>
  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/>
</svg>
</div>

结果

适用元素

以下元素可以使用该in属性

  • <feBlend>
  • <feColorMatrix>
  • <feComponentTransfer>
  • <feComposite>
  • <feConvolveMatrix>
  • <feDiffuseLighting>
  • <feDisplacementMap>
  • <feGaussianBlur>
  • <feMorphology>
  • <feOffset>
  • <feSpecularLighting>
  • <feTile>

属性 | Attributes相关

1.accent-height(焦点高度)
2.accumulate(积累)
3.additive
4.alignment-baseline(对齐基线)
5.ascent
6.attributename(属性名字)
7.Attributes(属性)
8.attributetype(属性类型)
9.azimuth(方位)
10.basefrequency
11.baseline-shift(基线漂移)
12.baseprofile
13.begin(开始)
14.bias(偏压)
15.calcmode
16.class
17.clip(剪辑)
18.clip-path(剪辑路径)
19.clip-rule(剪辑规则)
20.clippathunits
21.color(颜色)
22.color-interpolation(彩色插值)
23.color-interpolation-filters(色彩插值滤波器)
24.color-profile(彩色轮廓)
25.color-rendering(显色)
26.contentscripttype
27.contentstyletype
28.cursor(光标)
29.cx
30.cy
31.d
32.diffuseconstant
33.direction(方向)
34.display(显示)
35.divisor
36.dominant-baseline(显性基线)
37.dur
38.dx
39.dy
40.edgemode
41.elevation
42.end
43.externalresourcesrequired
44.fill
45.fill-opacity
46.fill-rule
47.filter
48.filterres
49.filterunits
50.flood-color
51.flood-opacity
52.font-family
53.font-size
54.font-size-adjust
55.font-stretch
56.font-style
57.font-variant
58.font-weight
59.fr
60.from
61.fx
62.fy
63.gradienttransform
64.gradientunits
65.height
66.href
67.image-rendering
68.in2
69.k1
70.k2
71.k3
72.k4
73.kernelmatrix
74.kernelunitlength
75.kerning
76.keysplines
77.keytimes
78.lengthadjust
79.letter-spacing
80.lighting-color
81.limitingconeangle
82.local
83.marker-end
84.marker-mid
85.marker-start
86.markerheight
87.markerunits
88.markerwidth
89.mask
90.maskcontentunits
91.maskunits
92.max
93.min
94.mode
95.numoctaves
96.opacity
97.operator
98.order
99.overflow
100.overline-position
SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。