initial commit

1 files changed, 303 insertions, 0 deletions

diff --git a/files/zh-cn/web/svg/attribute/stroke-linejoin/index.html b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.html
new file mode 100644
index 0000000000..209f1027a1
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.html
@@ -0,0 +1,303 @@
+---
+title: stroke-linejoin
+slug: Web/SVG/Attribute/stroke-linejoin
+translation_of: Web/SVG/Attribute/stroke-linejoin
+---
+<div>{{SVGRef}}</div>
+
+<p><strong><code>stroke-linejoin</code></strong> 属性指明路径的转角处使用的形状或者绘制的基础形状。</p>
+
+<div class="blockIndicator note"><strong>备注:</strong> 作为显示属性， <code>stroke-linejoin</code> 能被用做CSS属性。</div>
+
+<p>作为显示属性，该属性能被应用到任何元素，但只对这 9 种元素有效： {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, {{SVGElement('tspan')}}</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 18 12" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  Upper left path:
+  Effect of the "miter" value
+  --&gt;
+  &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="miter" /&gt;
+
+  &lt;!--
+  Center path:
+  Effect of the "round" value
+  --&gt;
+  &lt;path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="round" /&gt;
+
+  &lt;!--
+  Upper right path:
+  Effect of the "bevel" value
+  --&gt;
+  &lt;path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="bevel" /&gt;
+
+  &lt;!--
+  Bottom left path:
+  Effect of the "miter-clip" value
+  with fallback to "miter" if not supported.
+  --&gt;
+  &lt;path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" /&gt;
+
+  &lt;!--
+  Bottom right path:
+  Effect of the "arcs" value
+  with fallback to "miter" if not supported.
+  --&gt;
+  &lt;path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="arcs" /&gt;
+
+
+  &lt;!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  --&gt;
+  &lt;g id="highlight"&gt;
+    &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
+          stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5"   r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2"   r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5.5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+  &lt;use xlink:href="#highlight" x="6" /&gt;
+  &lt;use xlink:href="#highlight" x="12" /&gt;
+  &lt;use xlink:href="#highlight" x="2" y="6" /&gt;
+  &lt;use xlink:href="#highlight" x="8" y="6" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 400)}}</p>
+</div>
+
+<h2 id="用法">用法</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">值</th>
+   <td><code>arcs</code> | <code>bevel</code> |<code>miter</code> | <code>miter-clip</code> | <code>round</code></td>
+  </tr>
+  <tr>
+   <th scope="row">默认值</th>
+   <td><code>miter</code></td>
+  </tr>
+  <tr>
+   <th scope="row">可动画性</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="arcs">arcs</h3>
+
+<div class="blockIndicator note"><strong>说明:</strong> <code>arcs</code> 来自于 SVG2 但尚未被广泛支持，详情参见 <a href="#Browser_compatibility">浏览器兼容性</a></div>
+
+<p><code>arcs</code> 值指示将使用圆弧拐角来连接路径线段。 通过用与连接点的外边缘具有相同曲率的圆弧在连接点处延伸笔触的外边缘来形成弧形。</p>
+
+<h4 id="示例">示例</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effect of the "arcs" value --&gt;
+  &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none"
+        stroke-linejoin="arcs" /&gt;
+
+  &lt;!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  --&gt;
+  &lt;g id="p"&gt;
+    &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
+          stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('arcs', '100%', 200)}}</p>
+
+<h3 id="bevel">bevel</h3>
+
+<p>The <code>bevel</code> 用斜角连接路径段。</p>
+
+<h4 id="示例_2">示例</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effect of the "bevel" value --&gt;
+  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="bevel" /&gt;
+
+  &lt;!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  --&gt;
+  &lt;g id="p"&gt;
+    &lt;path d="M1,5 l2,-3 l2,3"
+          stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('bevel', '100%', 200)}}</p>
+
+<h3 id="miter">miter</h3>
+
+<p>The <code>miter</code> 用尖角连接路径段。 通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。</p>
+
+<div class="blockIndicator note"><strong>说明:</strong> 如果超出了{{SVGAttr('stroke-miterlimit')}}，则会退回到<code> bevel 。</code></div><code>
+
+<h4 id="示例_3">示例</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effect of the "miter" value --&gt;
+  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="miter" /&gt;
+
+  &lt;!-- Effect of the "miter" value on a sharp angle
+       where de default miter limit is exceeded --&gt;
+  &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
+        stroke-linejoin="miter" /&gt;
+
+  &lt;!-- the following red dotted line show where
+       the miter value falls back to the bevel value --&gt;
+  &lt;path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/&gt;
+
+  &lt;!-- the following pink lines highlight the position of the path for each stroke --&gt;
+  &lt;g&gt;
+    &lt;path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+
+    &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="7"    cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="7.75" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="8.5"  cy="5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('miter', '100%', 200)}}</p>
+
+<h3 id="miter-clip">miter-clip</h3>
+
+<div class="blockIndicator note"><strong>说明:</strong> <code>miter-clip</code> 来自于 SVG2 但尚未被广泛支持，详情参见 <a href="#Browser_compatibility">浏览器兼容性</a></div>
+
+<p>The <code>miter-clip</code> 用尖角连接路径段。 通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。</p>
+
+<p>如果超过了{{SVGAttr('stroke-miterlimit')}}，则斜切将被裁剪为等于{{SVGAttr('stroke-miterlimit')}}值乘以路径段相交处的笔划宽度的一半的距离。在非常尖锐的连接或动画的情况下，这提供了比<code> mitt 更好的渲染效果。</code></p><code>
+
+<h4 id="示例_4">示例</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effect of the "miter-clip" value --&gt;
+  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" /&gt;
+
+  &lt;!-- Effect of the "miter-clip" value on a sharp angle
+       where de default miter limit is exceeded --&gt;
+  &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" /&gt;
+
+  &lt;!-- the following red dotted line show where the clip should happen --&gt;
+  &lt;path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/&gt;
+
+  &lt;!-- the following pink lines highlight the position of the path for each stroke --&gt;
+  &lt;g&gt;
+    &lt;path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+
+    &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="7"    cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="7.75" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="8.5"  cy="5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('miter-clip', '100%', 200)}}</p>
+
+<h3 id="round">round</h3>
+
+<p><code>round</code> 使用圆角连接路径片段。</p>
+
+<h4 id="示例_5">示例</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effect of the "round" value --&gt;
+  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="round" /&gt;
+
+  &lt;!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  --&gt;
+  &lt;g id="p"&gt;
+    &lt;path d="M1,5 l2,-3 l2,3"
+          stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('round', '100%', 200)}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Definition for shapes and texts</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for shapes and texts</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("svg.attributes.presentation.stroke-linejoin")}}</p></code></code>