1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
---
title: vector-effect
slug: Web/SVG/Attribute/vector-effect
translation_of: Web/SVG/Attribute/vector-effect
---
<div>{{SVGRef}}</div>
<p><strong><code>vector-effect</code></strong> 属性指明绘制对象时要使用的矢量效果。在任何其他合成操作（如滤镜，蒙版和剪辑等）之前，都要应用矢量效果。</p>
<p class="note"><strong>备注:</strong> 作为显示性属性， <code>vector-effect</code> 也可以直接在 CSS 样式表中作为属性使用。</p>
<p>作为显示性属性，它能被应用到任何元素，但只对这10个元素有效果: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}} {{SVGElement("tspan")}}, and {{SVGElement("use")}}</p>
<h2 id="用法说明">用法说明</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row">值</th>
<td><code>none</code> | <code>non-scaling-stroke</code> | <code>non-scaling-size</code> | <code>non-rotation</code> | <code>fixed-position</code></td>
</tr>
<tr>
<th scope="row">默认值</th>
<td><code>none</code></td>
</tr>
<tr>
<th scope="row">可动画性</th>
<td>是</td>
</tr>
</tbody>
</table>
<dl>
<dt><code>none</code></dt>
<dd>该值指定不应用矢量效果，即，使用默认的渲染行为，即首先用指定的绘画填充形状的几何形状，然后使用指定的绘画描边轮廓。</dd>
<dt><code>non-scaling-stroke</code></dt>
<dd>该值修改了笔触的方式。通常，笔触涉及在当前用户坐标系中计算形状路径的笔触轮廓，并用笔触颜料（颜色或渐变）填充轮廓。该值的最终视觉效果是笔触宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。</dd>
<dt><code>non-scaling-size</code></dt>
<dd>该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，该用户坐标系的比例也不会更改。但是，它没有指定抑制旋转和偏斜。同样，它也不指定用户坐标系的原点。由于此值抑制了用户坐标系的缩放，因此它还具有<code>non-scaling-stroke</code>的特性。</dd>
<dt><code>non-rotation</code></dt>
<dd>该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间发生任何变换更改，该用户坐标系的旋转和倾斜仍被抑制。但是，它没有指定抑制缩放。同样，它也没有指定用户坐标系的原点。</dd>
<dt><code>fixed-position</code></dt>
<dd>该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，用户坐标系的位置都是固定的。但是，它没有指定抑制旋转，偏斜和缩放。当同时指定了该矢量效果和 {{SVGAttr("transform")}} 属性， {{SVGAttr("transform")}} 属性将因该矢量效果而被消耗。</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="Example_vector-effectnon-scaling-stroke">Example: vector-effect="non-scaling-stroke"</h3>
<pre class="brush: html"><svg viewBox="0 0 500 240">
<!-- normal -->
<path d="M10,20L40,100L39,200z" stroke="black" stroke-width="2px" fill="none"></path>
<!-- scaled -->
<path transform="translate(100,0)scale(4,1)" d="M10,20L40,100L39,200z" stroke="black"
stroke-width="2px" fill="none"></path>
<!-- fixed-->
<path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="M10,20L40,100L39,200z"
stroke="black" stroke-width="2px" fill="none"></path>
</svg>
</pre>
<h4 id="结果">结果</h4>
<p>{{EmbedLiveSample("Example_vector-effectnon-scaling-stroke", 550, 300)}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("SVG2", "coords.html#VectorEffectProperty", "vector-effect")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("svg.attributes.vector-effect")}}</p>
|
