initial commit

1 files changed, 102 insertions, 0 deletions

diff --git a/files/zh-cn/web/svg/attribute/pointer-events/index.html b/files/zh-cn/web/svg/attribute/pointer-events/index.html
new file mode 100644
index 0000000000..5a490a1b6d
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/pointer-events/index.html
@@ -0,0 +1,102 @@
+---
+title: pointer-events
+slug: Web/SVG/Attribute/pointer-events
+translation_of: Web/SVG/Attribute/pointer-events
+---
+<div>{{SVGRef}}</div>
+
+<p>pointer-events属性是一个展示属性，用于定义元素是否或何时可能是鼠标事件的目标元素。</p>
+
+<p class="note"><strong>Note:</strong> 作为一个展示属性， {{cssxref('pointer-events')}} 可以被当做CSS属性使用.</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  Circle元素将始终拦截鼠标事件。
+  为了改变较底部的的rect元素的颜色，
+  你需要点击rect元素在圆外的部分
+  --&gt;
+  &lt;rect x="0" y="0" height="10" width="10" fill="black" /&gt;
+  &lt;circle cx="5" cy="5" r="4" fill="white"
+          pointer-events="visiblePoint" /&gt;
+
+  &lt;!--
+  下面的circle元素将永远不会获取到鼠标事件，
+  当你点击circle元素或者点击rect元素时，
+  rect元素都会改变颜色
+  --&gt;
+  &lt;rect x="10" y="0" height="10" width="10" fill="black" /&gt;
+  &lt;circle cx="15" cy="5" r="4" fill="white"
+          pointer-events="none" /&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: js">window.addEventListener('mouseup', (e) =&gt; {
+  // 在 #000000 和 #FFFFFF之间随机选取一个颜色
+  const color = Math.round(Math.random() * 0xFFFFFF)
+
+  // 将color变量的值按照css的要求进行格式化
+  const fill = '#' + color.toString(16).padStart(6,'0')
+
+  // 将color变量设置的颜色应用到实际点击的元素上
+  e.target.style.fill = fill
+})</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p>
+</div>
+
+<p>作为一个展示属性，他可以被很多元素使用，但和它紧密相关的只有下面的23个元素: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('switch')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tspan')}}, {{SVGElement('use')}}</p>
+
+<h2 id="用法">用法</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">值</th>
+   <td><code>bounding-box</code> | <code>visiblePainted</code> | <code>visibleFill</code> | <code>visibleStroke</code> | <code>visible</code> | <code>painted</code> | <code>fill</code> | <code>stroke</code> | <code>all</code> | <code>none</code></td>
+  </tr>
+  <tr>
+   <th scope="row">默认值</th>
+   <td><code>visiblePainted</code></td>
+  </tr>
+  <tr>
+   <th scope="row">是否可动画</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><em>为了详细了解每个可能的值，请参考CSS文档 {{cssxref('pointer-events')}}.</em></p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容</h2>
+
+<div class="hidden">此页浏览器兼容的表格是根据结构化的数据生成的.如果你想要的为这份数据做贡献，请检出以下链接的内容 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并发送拉取请求</div>
+
+<p>{{Compat("svg.attributes.presentation.pointer-events")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "interact.html#PointerEventsProperty", "pointer-events")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "interact.html#PointerEventsProperty", "pointer-events")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>