From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 .../web/svg/attribute/shape-rendering/index.html   | 83 ++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 files/zh-cn/web/svg/attribute/shape-rendering/index.html

(limited to 'files/zh-cn/web/svg/attribute/shape-rendering')

diff --git a/files/zh-cn/web/svg/attribute/shape-rendering/index.html b/files/zh-cn/web/svg/attribute/shape-rendering/index.html
new file mode 100644
index 0000000000..c99a0e3104
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/shape-rendering/index.html
@@ -0,0 +1,83 @@
+---
+title: shape-rendering
+slug: Web/SVG/Attribute/shape-rendering
+tags:
+  - SVG
+  - SVG线条渲染
+  - 需要完善
+translation_of: Web/SVG/Attribute/shape-rendering
+---
+<p>« <a href="/zh-CN/docs/Web/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p>
+
+<p>指定SVG元素{{SVGElement("path")}}的渲染模式。</p>
+
+<h2 id="使用参考">使用参考</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">类型</th>
+   <td>外观属性</td>
+  </tr>
+  <tr>
+   <th scope="row">值</th>
+   <td><strong title="this is the default value">auto</strong> | optimizeSpeed | crispEdges | geometricPrecision | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">可运动</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">标准文档</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>auto</dt>
+ <dd>让浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度而非平滑度和速度。</dd>
+ <dt>optimizeSpeed</dt>
+ <dd>偏向渲染速度，浏览器会关闭反锯齿模式。（速度）</dd>
+ <dt>crispEdges</dt>
+ <dd>偏向更加清晰锐利的边缘的渲染。浏览器在渲染的时候会关闭反锯齿模式，且会让线条的位置和宽度和显示器边缘对齐。（锐度）</dd>
+ <dt>geometricPrecision</dt>
+ <dd>偏向渲染平滑的曲线。（平滑）</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg"
+  version="1.1" width="100" height="100"
+  shape-rendering="optimizeSpeed"&gt;&lt;!-- 这个示例在Firefox下看区别更明显 --&gt;</pre>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>
+    <p>shape-rendering: geometricPrecision:</p>
+
+    <p><img alt="shape-rendering:geometricPrecision" src="http://download.g63.ru/svg/shape-rendering-geometricPrecision.svg" style="height: 210px; width: 200px;"></p>
+   </td>
+   <td>
+    <p>shape-rendering: optimizeSpeed</p>
+
+    <p><img alt="shape-rendering:optimizeSpeed" src="http://download.g63.ru/svg/shape-rendering-optimizeSpeed.svg" style="height: 210px; width: 200px;"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>同样，你也可以在css样式中使用shape-rendering:</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg"
+  version="1.1" width="100" height="100"
+  style="shape-rendering:optimizeSpeed;"&gt;</pre>
+
+<h2 id="关联元素">关联元素</h2>
+
+<p>下面的元素可以使用这个属性</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf