diff options
Diffstat (limited to 'files/zh-tw/web/svg/tutorial/fills_and_strokes/index.html')
| -rw-r--r-- | files/zh-tw/web/svg/tutorial/fills_and_strokes/index.html | 184 |
1 files changed, 184 insertions, 0 deletions
diff --git a/files/zh-tw/web/svg/tutorial/fills_and_strokes/index.html b/files/zh-tw/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..568647df13 --- /dev/null +++ b/files/zh-tw/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,184 @@ +--- +title: 填充与边框 +slug: Web/SVG/Tutorial/Fills_and_Strokes +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +<p>{{ PreviousNext("SVG/Tutorial/Paths", "SVG/Tutorial/Gradients") }}</p> + +<p>现在你掌握的知识已经可以绘制任何图形，下一个目标是给它们上色。在SVG绘图中，可以使用若干方法上色，比如给图形对象增加指定的属性，使用行间CSS，使用CSS嵌入段落，或者使用外部引用的CSS文件。你会发现大部分web上的SVG使用的是行间CSS，但每种方法都有自身的优点和缺点，在不同情况下，应该酌情选择合适的方法。</p> + +<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">fill（填充）和stroke（边框）属性</h2> + +<h3 id="Painting" name="Painting">上色</h3> + +<p>大多数基本的颜色可以使用<code>fill</code>和<code>stroke</code>两个属性来设置。<code>fill</code>设置的是对象的填充色，<code>stroke</code>设置的是对象的边框颜色，你可以使用在HTML中设置CSS颜色的方式定义它们的颜色，比如颜色名（<em>red</em>），<em>rgb</em>值，<em>hex</em>值，<em>rgba</em>值。</p> + +<pre class="brush:xml;"> <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" + + fill-opacity="0.5" stroke-opacity="0.8"/> + +</pre> + +<p>此外，在SVG中你可以分别定义填充色和边框色的透明度，它们分别由<code> fill-opacity </code>和<code> stroke-opacity </code>两个属性控制。</p> + +<div class="note style-wrap">注意，FireFox 3+支持rgba值，并且能够提供同样的效果，但是为了在其他浏览器中保持兼容，最好将它和边框/填充的透明度分开使用。如果同时定义了rgba值和透明度，它们将被一起调用。</div> + +<h3 id="Stroke" name="Stroke">边框</h3> + +<p>除了颜色属性，还有其他一些属性用来控制绘制边框的方式。</p> + +<p><img align="right" alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> + +<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> + + <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> + + <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> + +</svg></pre> + +<p>我要特别提醒一点，边框是围绕路径绘制的，在上面的例子里，路径是粉色的，边框是黑色的。<code>stroke-width</code>属性定义了边框的粗细，如你所见，路径的每一侧都有均匀分布的边框。</p> + +<p>第二个要介绍的是<code>stroke-linecap</code>属性，它控制边框终点的形状。<code>stroke-linecap</code>属性的值有三种，<code>butt</code>表示用直边结束边框，<code>square</code>的效果差不多，但是会稍微超出<code>path</code>的范围，超出的大小是<code>stroke-width</code>控制的。<code>round</code>表示边框的终点是圆角，圆角的半径也是<code>stroke-width</code>控制的。</p> + +<p>还有一个<code>stroke-linejoin</code>属性，用来控制两条边框线段之间，用什么方式连接。</p> + +<p><img align="right" alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> + +<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" + + stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> + + + + <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" + + stroke-linecap="round" fill="none" stroke-linejoin="round"/> + + + + <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" + + stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> + +</svg></pre> + +<p>折线是由两个线段连接起来的，连接处的样式由<code>stroke-linejoin</code>属性控制，它有三个可用的值，<code>miter</code>是默认值，表示用方形画笔在连接处形成直角，<code>round</code>表示用圆角连接，实现平滑效果。最后还有一个值<code>bevel</code>，连接处会形成一个斜线。</p> + +<p>最后，你可以使用<code>stroke-dasharray</code>属性，将边框定义成虚线。</p> + +<p><img align="right" alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> + +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" + + stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> + + <path d="M 10 75 L 190 75" stroke="red" + + stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> + +</svg></pre> + +<p><code>stroke-dasharray</code>属性的参数，是一组用逗号分割的数字组成的序列。需要注意的是，这里的数字必须用逗号分割，虽然也可以插入空格，但是数字之间必须用逗号分开。每一组数字，第一个用来表示实线，第二个用来表示空白。所以在上面的例子里，第二个路径会先画5px实线，紧接着是5px空白，然后又是5px实线，从而形成虚线。如果你想要更复杂的虚线模式，你可以定义更多的数字。上面例子里的第一个，就定义了3个数字，这种情况下，数字会循环两次，形成一个偶数的虚线模式。所以该路径首先是5px实线，然后是10px空白，然后是5px实线，接下来循环这组数字，形成5px空白、10px实线、5px空白。然后这种模式会继续循环。</p> + +<p>另外还有一些关于填充和边框的属性，包括<code>fill-rule</code>，用于定义如何给图形重叠的区域上色；<code>stroke-miterlimit</code>，定义什么情况下绘制或不绘制边框连接的<code>miter</code>效果；还有<code>stroke-dashoffset</code>，定义虚线开始的位置。</p> + +<h2 id="Using_CSS" name="Using_CSS">使用CSS</h2> + +<p>除了定义对象的属性外，你也可以通过CSS来定义<code>fill</code>和<code>stroke</code>。语法和在html里使用CSS一样，只不过你要把<code>background-color</code>、<code>border</code>改成<code>fill</code>和<code>stroke</code>。注意，不是所有的属性都能用CSS来设置。上色和填充的部分一般是可以用CSS来设置的，比如<code>fill</code>，<code>stroke</code>，<code>stroke-dasharray</code>等，但是不包括下面会提到的渐变和模式等功能。另外，宽、高，以及路径的d命令，都不能用css设置。判断它们能不能用CSS设置还是比较容易的。</p> + +<div class="note style-wrap"> + +<a class="external" href="http://www.w3.org/TR/SVG/propidx.html" title="http://www.w3.org/TR/SVG/propidx.html">SVG规范</a>将属性区分成<em>properties</em>和<em>其他attributes</em>，前者是可以用CSS设置的，后者不能。</div> + +<p>CSS可以通过style属性插入到元素的行间:</p> + +<pre class="brush:xml;"> <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> + +</pre> + +<p>或者通过<style>设置一段样式段落。在html里这样的段落一般放在里，在svg则放在<a href="/en/SVG/Element/defs" title="en/SVG/Element/defs"><code><defs></code></a>标签里。<code><defs></code>表示定义，这里可以定义一些不会在SVG图形中出现的元素，但是它们可以被其他元素使用。<code><head></code></p> + +<pre class="brush:xml;"> + +<?xml version="1.0" standalone="no"?> + +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <defs> + + <style type="text/css"><![CDATA[ + + #MyRect { + + stroke: black; + + fill: red; + + } + + ]]></style> + + </defs> + + <rect x="10" height="180" y="10" width="180" id="MyRect"/> + +</svg></pre> + +<p>通过使用style段落你可以更轻易地调整一大组元素的样式，同样你也可以通过<strong>hover</strong>这样的伪类来创建翻转之类的效果:</p> + +<pre class="brush:css;"> + + #MyRect:hover { + + stroke: black; + + fill: blue; + + } + +</pre> + +<p>你最好读一下CSS教程以便掌握它，一些可以在html里使用的css，在svg里可能无法正常工作，比如<code>before</code>和<code>after</code>伪类。所以这里需要一点经验。</p> + +<p>你也可以定义一个外部的样式表，但是要符合<a class="external" href="http://www.w3.org/TR/xml-stylesheet/" title="http://www.w3.org/TR/xml-stylesheet/">normal XML-stylesheet syntax</a>的CSS规则:</p> + +<pre class="brush:xml;"> + +<?xml version="1.0" standalone="no"?> + +<?xml-stylesheet type="text/css" href="style.css"?> + + + +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <rect height="10" width="10" id="MyRect"/> + +</svg></pre> + +<p>style.css看起来就像这样：</p> + +<pre class="brush:css;"> + +#MyRect { + + fill: red; + + stroke: black; + +}</pre> + +<p>{{ PreviousNext("SVG/Tutorial/Paths", "SVG/Tutorial/Gradients") }}</p></style></p> |