hatch

这是一项实验技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

<hatch>SVG元素被用于填充或中风使用一个或多个被以固定的间隔在规定的方向，以覆盖待喷涂的区域重复预定义路径的对象。

<hatch>然后由给定的图形元素上的fill和CSS属性引用由该元素定义的剖面线，以指示该给定元素将被填充或用该剖面线描边。路径由元素定义。stroke <hatchpath>

用法上下文

分类	从未渲染的元素，Paint服务器元素
允许的内容	任意数量的以下元素（以任意顺序）：动画元素描述元素<hatchpath>，<script>，<style>

属性

全局属性

Core attributes

Global event attributes

Presentation attributes

Style attributes

Specific attributes

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	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18