hatch
<hatch>
这是一项实验技术
由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
<hatch>SVG元素被用于填充或中风使用一个或多个被以固定的间隔在规定的方向，以覆盖待喷涂的区域重复预定义路径的对象。
<hatch>然后由给定的图形元素上的fill和CSS属性引用由该元素定义的剖面线，以指示该给定元素将被填充或用该剖面线描边。路径由元素定义。stroke <hatchpath>
用法上下文
| 分类 | 从未渲染的元素，Paint服务器元素 |
|---|---|
| 允许的内容 | 任意数量的以下元素（以任意顺序）：动画元素描述元素<hatchpath>，<script>，<style> |
属性
全局属性
- Core attributes
- Global event attributes
- Presentation attributes
- Style attributes
Specific attributes
x
y
pitch
rotate
hatchUnits
hatchContentUnits
transform
href
DOM接口
这个元素实现了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>
结果
产品规格
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2The definition of '<hatch>' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | No support1 | No support2 | No support3 | No support | No support1 | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ?1 | No support3 | No support | No support | ? |
