<hatch>

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

Experimental: 这是实验性技术
检查浏览器兼容性表格要小心谨慎在生产中使用这之前。

<hatch> SVG element is used to fill or stroke an object using one or more pre-defined paths that are repeated at fixed intervals in a specified direction to cover the areas to be painted.

Hatches defined by the <hatch> element can then referenced by the fill and stroke CSS properties on a given graphics element to indicate that the given element shall be filled or stroked with the hatch. Paths are defined by <hatchpath> 元素。

Usage context

类别	Never-rendered element, Paint server element
准许内容	Any number of the following elements, in any order: Animation elements Descriptive elements `<hatchpath>` , `<script>` , `<style>`

属性

全局属性

Specific attributes

DOM Interface

This element implements the SVGHatchElement 接口。

范例

SVG

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">



<

defs


>





<

hatch


id



=


"

hatch

"



hatchUnits



=


"

userSpaceOnUse

"



pitch



=


"

5

"



rotate



=


"

135

"



>





<

hatchpath


stroke



=


"

#a080ff

"



stroke-width



=


"

2

"



/>





</

hatch


>





</

defs


>





<

rect


fill



=


"

url(#hatch)

"



stroke



=


"

black

"



stroke-width



=


"

2

"



x



=


"

10%

"



y



=


"

10%

"



width



=


"

80%

"



height



=


"

80%

"



/>





</

svg


>

结果

浏览器兼容性

BCD tables only load in the browser

另请参阅

<hatchpath>

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者