diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
| commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
| tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/web/svg/tutorial | |
| parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
| download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip | |
initial commit
Diffstat (limited to 'files/zh-tw/web/svg/tutorial')
| -rw-r--r-- | files/zh-tw/web/svg/tutorial/fills_and_strokes/index.html | 184 | ||||
| -rw-r--r-- | files/zh-tw/web/svg/tutorial/getting_started/index.html | 91 | ||||
| -rw-r--r-- | files/zh-tw/web/svg/tutorial/gradients/index.html | 148 | ||||
| -rw-r--r-- | files/zh-tw/web/svg/tutorial/index.html | 51 | ||||
| -rw-r--r-- | files/zh-tw/web/svg/tutorial/introduction/index.html | 26 | ||||
| -rw-r--r-- | files/zh-tw/web/svg/tutorial/patterns/index.html | 54 | ||||
| -rw-r--r-- | files/zh-tw/web/svg/tutorial/positions/index.html | 51 | ||||
| -rw-r--r-- | files/zh-tw/web/svg/tutorial/路径/index.html | 239 |
8 files changed, 844 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> diff --git a/files/zh-tw/web/svg/tutorial/getting_started/index.html b/files/zh-tw/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..177e9ad15b --- /dev/null +++ b/files/zh-tw/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,91 @@ +--- +title: 入門 +slug: Web/SVG/Tutorial/Getting_Started +translation_of: Web/SVG/Tutorial/Getting_Started +--- +<p>{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}</p> + +<h3 id="A_Simple_Example" name="A_Simple_Example">一個簡單的例子</h3> + +<p>讓我們用一個簡單的例子來進入主題，先看下面的程式碼：</p> + +<pre class="brush: xml"><svg version="1.1" + baseProfile="full" + xmlns="http://www.w3.org/2000/svg"> + + <rect width="100%" height="100%" fill="red" /> + + <circle cx="150" cy="100" r="80" fill="green" /> + + <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> + +</svg> +</pre> + +<p>複製這段程式碼，在一個文件裡貼上，給該文件起名為demo1.svg，然後用Firefox打開它，會渲染成下面截圖的樣子。(Firefox 用户: 點<a class="external" href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">這裡</a>)</p> + +<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p> + +<p>渲染過程包括以下内容：</p> + +<ol> + <li>我們先看一下<code>svg</code>根元素： + + <ul> + <li>不使用類似(X)HTML的文檔聲明，因為基於SVG的DTD會造成很多問題，弊大於利。</li> + <li>為了明確SVG版本，<code>version</code> 和 baseProfile 兩個屬性必須要寫</li> + <li>作為XML方言，SVG必須始終绑定正確的命名空間（xmlns属性）。更多資訊，請參考<a href="/en/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course">命名空間速成班頁面</a></li> + </ul> + </li> + <li>畫一個覆蓋整個圖形的矩形 ，將背景設為红色</li> + <li>在红色矩形中間畫一個綠色的圓形<code>，半徑是80像素（圓心坐標：x軸向左偏移150像素，y軸向上偏移100像素）【坐標系統會在後面章節介紹】</code></li> + <li><code>描繪“SVG”文字，字母填充成白色，通過設定錨點定義文本的中點，在這個例子裡，中點是綠色圓形的圓心，通過調整字號和垂直位置，確保最終顯示效果的美觀</code></li> +</ol> + +<h3 id="SVG文件的基本屬性"><code>SVG文件的基本屬性</code></h3> + +<ul> + <li><code>首先要注意的是元素渲染的順序，SVG的全局規則是：<em>靠後的元素，將在靠前的元素上面渲染</em>。</code></li> + <li><code>在web上，SVG可以直接放進瀏覽器裡顯示，或者通過以下幾種方式嵌入到HTML文檔中顯示： </code> + <ul> + <li><code>如果是XHTML文檔，並且響應端接受<code>application/xhtml+xml類型</code>，SVG就可以在XML源裡直接嵌入</code></li> + <li><code>如果是HTML5文檔，並且瀏覽器支持HTML5，SVG也可以直接嵌入，但是語法上需要修改，以符合HTML5規範。</code></li> + <li><code>SVG可以通過<code>Object</code>元素引入: </code> + <pre><code> <object data="image.svg" type="image/svg+xml" /></code></pre> + <code> </code></li> + <li><code>同樣可以通過<code>iframe</code>引入: </code> + <pre><code> <iframe src="image.svg"></iframe></code></pre> + <code> </code></li> + <li><code>理論上，<code>img</code>元素也可以用来引入SVG，但是Firefox 4.0之前的版本不支持這一功能。</code></li> + <li><code>最後，SVG可以用JavaScript動態創建，並且注入到HTML DOM裡面。這樣做的好處是，對於不支持SVG的瀏覽器，可以啟用其它替代技術。</code></li> + </ul> + <code> 這是一個深入探討該主題的<a href="/en/SVG_In_HTML_Introduction" title="en/svg in html introduction">專題頁面</a>。 </code></li> + <li><code>SVG如何處理大小和單位，將在<a href="/en/SVG/Tutorial/Positions" title="en/SVG/Tutorial/Positions">下一頁</a>進行解釋。</code></li> +</ul> + +<h3 id="SVG_File_Types" name="SVG_File_Types"><code>SVG文件的類型</code></h3> + +<p><code>SVG文件類型有兩種，普通的SVG文件是包含SVG標籤的文字文件，這類型文件的副檔名是“.svg”（全小寫）。</code></p> + +<p><code>SVG規範支持超大體積的SVG文件，以便符合一些應用程式的使用要求（比如地理應用），所以SVG規範提供了gzip壓縮的SVG文件格式，這類文件的後缀是“.svgz”（全小寫）。不幸的是，從微軟的IIS伺服器上獲取SVG壓縮文件將會出現問題，並且，Firefox不支持本機端的SVG壓縮文件。所以，如果要使用SVG壓縮文件，你必須保證使用的是支持這種文件的服務器。</code></p> + +<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers"><code>關於web服務器</code></h3> + +<p><code>現在你已經大致瞭解了如何創建SVG文件，下一步就是將SVG文件上傳到服務器上。這裡有一些問題需要注意。對於一般的SVG文件，服務器的HTTP響應端是：</code></p> + +<pre><code>Content-Type: image/svg+xml +</code></pre> + +<p><code>對於經過壓縮的SVG文件，響應端應該是：</code></p> + +<pre><code>Content-Type: image/svg+xml +Content-Encoding: gzip +</code></pre> + +<p><code>你可以通過一些網站來檢查你的服務器是否使用了正确的響應端，比如 <a class="external" href="http://web-sniffer.net/">web-sniffer.net</a>，提交一個SVG文件的URL，看一下響應端是什麼。如果你的服務器在響應裡没能返回上面的内容，那麼你應該聯繫一下您的主機服務商。如果他們不提供相關的配置服務，你也可以自動動手，具體方法可以查閱SVG wiki的 <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration">服務器配置頁面</a>。</code></p> + +<p><code>服務器配置錯誤是SVG加載失敗的主要原因，所以一定要確認你的配置。如果你没有給SVG文件配置正確的服務器響應端，Firefox將會以文本的方式展示文件的標記和編碼内容，甚至要求用户選擇一个應用程序打開它。</code></p> + +<p><code>{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}</code></p> + +<p><code>{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started", "zh-TW":"zh-TW/SVG/Tutorial/Getting_Started" } ) }}</code></p> diff --git a/files/zh-tw/web/svg/tutorial/gradients/index.html b/files/zh-tw/web/svg/tutorial/gradients/index.html new file mode 100644 index 0000000000..63a0949cc3 --- /dev/null +++ b/files/zh-tw/web/svg/tutorial/gradients/index.html @@ -0,0 +1,148 @@ +--- +title: 漸層 +slug: Web/SVG/Tutorial/Gradients +translation_of: Web/SVG/Tutorial/Gradients +--- +<p>{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}</p> + +<p>除了基本的 fill 和 stroke 之外，我們還有一個更令人興奮的功能：給邊框和填充設置漸層。</p> + +<p>漸層的類型有兩種，線形漸層和放射形漸層。線形漸層沿直線變化，在 defs元素裡創建一個 {{SVGElement('linearGradient')}} 元素，就創建了一個線形漸層。漸變<strong>必須</strong>有一個<code>id</code>屬性，否則它不能被其他元素引用，等於白做了。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/347/=SVG_Linear_Gradient_Example.png" style="float: right;"></p> + +<pre class="brush: xml"><?xml version="1.0" standalone="no"?> + +<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="Gradient1"> + <stop class="stop1" offset="0%"/> + <stop class="stop2" offset="50%"/> + <stop class="stop3" offset="100%"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="0%" stop-color="red"/> + <stop offset="50%" stop-color="black" stop-opacity="0"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <style type="text/css"><![CDATA[ + #rect1 { fill: url(#Gradient1); } + .stop1 { stop-color: red; } + .stop2 { stop-color: black; stop-opacity: 0; } + .stop3 { stop-color: blue; } + ]]></style> + </defs> + + <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> + +</svg></pre> + +<p>在上面的例子裡，一個線形漸層被用在<code><rect></code>元素上，線形漸層內部有若干 {{SVGElement('stop')}} 節點，它們用來指定漸變應該在什麼位置形成什麼顏色，其中兩個屬性分別是：定義偏移位置的<code>offset</code>屬性和定義顏色的<code>stop-color</code>屬性。另外，它們可以直接設置，或通過CSS設置。上面的例子裡混合使用了這兩種形式。比如，這個例子的漸變是從紅色開始，到中間漸變成黑色，最後漸變到藍色。你可以按照自己的想法設置各種<code>stop-color</code>，但是它們的offset必須是從0%逐漸提高到100%。（如果不加%，就是0-1）。如果有重複的值，不會被分配到xml樹的最後。另外像fill和stroke一樣，你也可以設置一個<code>stop-opacity</code>屬性表示透明度。 （ff3裡這裡也可以用rgba值）</p> + +<pre class="eval"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> +</pre> + +<p>使用漸變時，我們需要在對象的fill或stroke屬性裡引用它。就像在CSS里通過<code>url</code>來引用其他元素一樣，在這裡，url引用的是我們給漸變設置的id，所以只需要將fill屬性設置成<code>url(#Gradient) </code>，我們的對象就可以呈現出五彩斑斕的效果。另外你也可以給stroke進行同樣的設置。</p> + +<p><code><linearGradient></code>元素還可以設置其他一些屬性，用來定義尺寸和样式。比如漸變的方向是由兩個點控制的，它們用<code>x1</code>， <code>x2</code>，<code>y1</code>，<code>y2</code>四個屬性控制，形成一條直線，漸變就沿這條直線變化。漸變默認的方向是水平方向，使用這些屬性就可以改變方向。上面例子裡的Gradient2就是一個垂直的漸變。</p> + +<pre class="eval"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> +</pre> + +<div class="note">你也可以在漸變中使用<code>xlink:href</code>屬性，它可以將一個漸變的屬性和stop節點，引入到另一個漸變中。在下面的例子裡，我們就不需要在Gradient2裡重新創建許多stop節點。 + +<pre class="eval"> <linearGradient id="Gradient1"> + <stop id="stop1" offset="0%"/> + <stop id="stop2" offset="50%"/> + <stop id="stop3" offset="100%"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" + xmlns:xlink="<a class="external" href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/> +</a></pre> +這裡我直接在元素裡定義了xlink的命名空間，通常我們會在文檔的頂部定義它。在 <a href="/en/SVG/Tutorial/Other_content_in_SVG" title="en/SVG/Tutorial/Other content in SVG">talk about images</a> 有更多相關內容。</div> + +<p>放射形漸層很類似線形漸層，只不過是從一個點向外發散漸變。在文檔的 defs 段落裡增加一個 {{SVGElement('radialGradient')}} 元素，就可以創建放射形漸層。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/351/=SVG_Radial_Gradient_Example.png" style="float: right;"></p> + +<pre><?xml version="1.0" standalone="no"?> + +<svg width="120" height="240" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="Gradient1"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="Gradient2" cx="0.25" cy="0.25" r="0.25"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> + +</svg></pre> + +<p>這個例子的里，放射形漸層中的stop節點在用法上和前面的線形漸層一樣，但是這裡的圖形對像是中間呈紅色，然後向各個方向發散漸變，直到邊緣漸變到藍色。放射形漸層<code><radialGradient></code>也有若干用來定義位置和方向的屬性，不過與線形漸層不同，這裡的設置會稍微複雜一點。放射形漸層裡也可以設置兩個點，用來確定它的範圍。第一個點用來定義一個環，限定漸變的範圍。該點包括坐標屬性<code>cx</code>和<code>cy</code>，以及半徑屬性<code>r</code>。定義這三個屬性，就可以改變漸變的位置和大小，就像上面例子裡的第二個漸變效果。</p> + +<p>第二個點被稱為焦點，通過坐標屬性<code>fx</code>和<code>fy</code>來確定。第一個點決定的是漸變所處的範圍，而焦點則決定漸變的中心。看例子更好理解：</p> + +<p><img alt="" class="internal" src="/@api/deki/files/352/=SVG_Radial_Grandient_Focus_Example.png" style="float: right;"></p> + +<pre><?xml version="1.0" standalone="no"?> + +<svg width="120" height="120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="Gradient" + cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" + fill="url(#Gradient)" stroke="black" stroke-width="2"/> + + <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> + <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> + <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> + <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> + <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> + +</svg></pre> + +<p>如果焦點被移動到漸變範圍之外，漸變不可能被正確渲染，所以會被重定義到範圍的邊緣。如果不定義焦點，則默認與漸變範圍的中點是同一點。</p> + +<p>兩種漸變都可以通過一些屬性，定義諸如變形等樣式。在這裡僅提其中一個：<code>spreadMethod</code>屬性。當漸變已經到達範圍邊緣，但圖形對像還沒被完全填充時，這一屬性將決定接下來會發生什麼。它有三個可用值，"pad", "reflect", 以及 "repeat"。 "pad"的效果你已經看到過了，當漸變到達範圍邊緣，最後一個顏色將用來填充圖形剩下的區域。 "reflect"是繼續漸變，但是會從100%處的顏色漸變會0%的位置，然後再翻過來繼續。 "Repeat"也是讓漸變繼續，不過是跳過返回的過程，直接回到起始狀態，然後重新漸變。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/353/=SVG_SpreadMethod_Example.png" style="float: right;"></p> + +<pre><?xml version="1.0" standalone="no"?> + +<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="Gradient" + cx="0.5" cy="0.5" r="0.25" fx=".25" fy=".25" + spreadMethod="repeat"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + <rect x="50" y="50" rx="15" ry="15" width="100" height="100" + fill="url(#Gradient)"/> +</svg></pre> + +<p>另外，兩個漸變都有一個名為<code>gradientUnits</code>的屬性，它用來決定漸變的單位。它有兩個可用值：<code>userSpaceOnUse</code> or <code>objectBoundingBox</code>。 <code>objectBoundingBox</code>是默認值，表示漸變會使用圖形對象的單位，所以你定義坐標時使用的是0到1，它們會自動計算成你的圖形對象使用的尺寸。 <code>userSpaceOnUse</code>表示要用絕對單位，所以你必須知道你的圖形對象的位置，然後將漸變的位置放在那兒。於是放射形漸層可以這樣寫：</p> + +<pre class="eval"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"> +</pre> + +<p>你還可以使用<code>gradientTransform</code>屬性創建其他類型的變換，但現在我們還沒說到<a href="/en/SVG/Tutorial/Basic_Transformations" title="en/SVG/Tutorial /Basic Transformations">introduced transforms</a>，所以這些內容會留到後面再講。</p> + +<p>當圖形對象的不是方形時，還有一個需要注意的處理方式：<code>gradientUnits="objectBoundingBox"</code>。但是它太複雜了，需要其他專家來講解。</p> + +<p>{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}</p> diff --git a/files/zh-tw/web/svg/tutorial/index.html b/files/zh-tw/web/svg/tutorial/index.html new file mode 100644 index 0000000000..d688ac6fe7 --- /dev/null +++ b/files/zh-tw/web/svg/tutorial/index.html @@ -0,0 +1,51 @@ +--- +title: SVG教學 +slug: Web/SVG/Tutorial +translation_of: Web/SVG/Tutorial +--- +<p><a href="/en/SVG" title="en/SVG">SVG</a>是W3C XML的方言之一，用於標記可縮放的向量圖形。目前在Firefox、Opera、Webkit瀏覽器、IE等瀏覽器中已經部分實作。</p> + +<p>本教學之目標在解釋SVG內部的技術細節。如果你只是想要畫出漂亮的圖形，你可以在<a class="external" href="http://inkscape.org/doc/" title="http://inkscape.org/doc/">Inkscape的文件頁面</a>上找到更多有用的資源。或是看看另一個好的SVG介绍：<a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3C的SVG入門</a>。</p> + +<div class="note">本教學文件還在初期階段，如果你有能力，可以來增加擴展一兩段，寫一整頁的话會更好！</div> + +<h5 id="從頭介紹SVG">從頭介紹SVG</h5> + +<ul> + <li><a href="/zh-TW/SVG/Tutorial/Introduction" title="zh-TW/SVG/Tutorial/Introduction">導論</a></li> + <li><a href="/en/SVG/Tutorial/Getting_Started" title="en/SVG/Tutorial/Getting_Started">開始</a></li> + <li><a href="/en/SVG/Tutorial/Positions" title="en/SVG/Tutorial/Positions">坐標定位</a></li> + <li><a href="/en/SVG/Tutorial/Basic_Shapes" title="en/SVG/Tutorial/Basic_Shapes">基本形状</a></li> + <li><a href="/en/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">路徑</a></li> + <li><a href="/en/SVG/Tutorial/Fills_and_Strokes" title="en/SVG/Tutorial/Fills_and_Strokes">填充與邊框</a></li> + <li><a href="/en/SVG/Tutorial/Gradients" title="en/SVG/Tutorial/Gradients">漸變</a></li> + <li><a href="/en/SVG/Tutorial/Patterns" title="en/SVG/Tutorial/Patterns">模式</a></li> + <li><a href="/en/SVG/Tutorial/Texts" title="en/SVG/Tutorial/Texts">文字</a></li> + <li><a href="/en/SVG/Tutorial/Basic_Transformations" title="en/SVG/Tutorial/Basic_Transformations">基本變换</a></li> + <li><a href="/en/SVG/Tutorial/Clipping_and_masking" title="en/SVG/Tutorial/Clipping_and_masking">裁剪和遮罩</a></li> + <li><a href="/en/SVG/Tutorial/Other_content_in_SVG" title="en/SVG/Tutorial/Other content in SVG">其他SVG内容</a></li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter effects">濾镜效果</a></li> + <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG fonts">SVG字型</a></li> + <li><a href="/en/SVG/Tutorial/SVG_Image_Tag" title="en/SVG/Tutorial/SVG Image Tag">SVG的Image標籤</a></li> + <li><a href="/en/SVG/Tutorial/Tools_for_SVG" title="en/SVG/Tutorial/Tools_for_SVG">SVG工具</a></li> +</ul> + +<p>下面陳列進階主题，需要單獨列出教學。</p> + +<h5 id="JavaScript脚本化SVG">JavaScript脚本化SVG</h5> + +<p>待定</p> + +<h5 id="SVG濾镜教學">SVG濾镜教學</h5> + +<p>待定</p> + +<h5 id="SVG的SMIL動畫">SVG的SMIL動畫</h5> + +<p>待定</p> + +<h5 id="在SVG中建立字形">在SVG中建立字形</h5> + +<p>待定</p> + +<p>{{ languages( { "de": "de/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik", "zh-CN":"zh-CN/SVG/Tutorial" } ) }}</p> diff --git a/files/zh-tw/web/svg/tutorial/introduction/index.html b/files/zh-tw/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..44901017bf --- /dev/null +++ b/files/zh-tw/web/svg/tutorial/introduction/index.html @@ -0,0 +1,26 @@ +--- +title: 引言 +slug: Web/SVG/Tutorial/Introduction +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting_Started") }}</p> +<p><img align="right" alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png"><a href="/en/SVG" title="en/SVG">SVG</a>（Scalable Vector Graphics）是<a href="/en/XML" title="en/XML">XML</a>的方言，有点类似XHTML，它可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以变形，可以合并，也可以通过滤镜完全改变外观。</p> +<p>SVG于1999年推出，之前有几个相互竞争的格式规范被提交到<a class="external" href="http://www.w3.org" title="en/W3C">W3C</a>，但是都没有完全通过。虽然规范已经出现存在很长时间了，但浏览器实现的进度却比较缓慢，所以目前（2009年）应用在web上的SVG内容并不是很多。即便浏览器实现了一些规范，但实现速度完全不能和竞争技术相比，比如<a href="/en/HTML/Canvas" title="en/HTML/Canvas">HTML Canvas</a>和Adobe Flash，都已经实现了成熟的应用接口。但是SVG也有自身的优点，比如它实现了DOM接口（比Canvas方便），不需要安装第三方插件就可以在浏览器中使用（比Flash方便）。当然，是否使用SVG还要取决于你要实现什么。</p> +<h3 id="基本要素">基本要素</h3> +<p>HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。一个简单的SVG文档只包含<code>svg</code>根元素，以及基本的形状元素。另外还有一个<code>g</code>元素，它用来把若干个基本形状标记成一个组。</p> +<p>在上述内容的基础上，SVG可以成为任何复杂的组合图形，SVG支持渐变、旋转、滤镜效果、JavaScript接口等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。</p> +<h3 id="Before_you_start" name="Before_you_start">开始之前</h3> +<p>包括<a class="external" href="http://www.inkscape.org/">Inkscape</a>在内的很多免费应用原生支持SVG格式的文件。但是本教程建议在学习过程中使用XML或文本编辑器，因为想要理解SVG内部的原理，最好的方法就是动手取写一些SVG的标记。各种SVG浏览器是有差别的，因此很可能当你制作了一个SVG图形，并且用一个工具调试正常后，却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持SVG标准的程度不同，另外，如果你将其他技术和SVG一起使用（比如a href="/en/JavaScript" title="en/JavaScript">JavaScript和<a href="/en/CSS" title="en/CSS">CSS</a>），也会出现类似的情况。</p> +<p>并非所有的现代浏览器都支持SVG，<a class="external" href="http://wiki.svg.org/Viewer_Implementations">SVG wiki</a>上有一份比较详细的SVG浏览器列表，Firefox支持SVG 1.5版本中的部分内容，并且支持的程度越来越高。希望通过这里的教程，MDC能帮助开发者理解Gecko内核和其他一些主要实现之间的差异。</p> +<p>正式开始之前，你需要基本掌握XML或其他像<abbr title="HyperText Markup Language">HTML</abbr>的标记语言，如果你不是很熟悉XML，这里有几个重点一定要记住：</p> +<ul> + <li>SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的（这一点和html不同）</li> + <li>SVG里的属性值必须用引号引起来，就算是数值也必须这样做。</li> +</ul> +<p>SVG是一个庞大的规范，本教程主要涵盖的是基础内容，一旦掌握了这些内容，你就有能力使用<a href="/en/SVG/Element" title="en/SVG/Element">元素文档</a>和<a href="/en/SVG/Interface" title="en/SVG/Interface">接口文档</a>，去了解其他任何你想要掌握的内容。</p> +<h3 id="SVG的种类">SVG的种类</h3> +<p>自从2003年成为W3C推荐标准以来，最接近的“完整版”SVG是1.1版，它基于1.0版，并且增加了更多便于实现的模块化内容，SVG1.1的第二个版本正在制定当中，完整的SVG1.2本来是下一个标准版本，但已经被SVG2.0取代。SVG2.0正在制定当中，它采用了类似CSS3的制定方法，通过若干松散耦合的组件形成一套标准。</p> +<p>除了完整的SVG标准，W3C工作组还在2003年推出了SVG Tiny和SVG Basic。首先SVG Tiny主要是为性能低的小设备生成图元，而SVG Basic实现和完整版SVG里的很多功能，只是舍弃了难以实现的大型渲染（比如动画）。2008年，SVG Tiny1.2成为W3C推荐标准。</p> +<p>另外还有一些关于SVG打印规格的项目，增加对多页面和颜色管理的支持，但是这项工作已经终止。</p> +<p>{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting_Started") }}</p> +<p>{{ languages( { "de": "de/SVG/Tutorial/Einführung", "fr": "fr/SVG/Tutoriel/Introduction", "ja": "ja/SVG/Tutorial/Introduction", "zh-CN": "zh-CN/SVG/Tutorial/Introduction" } ) }}</p> diff --git a/files/zh-tw/web/svg/tutorial/patterns/index.html b/files/zh-tw/web/svg/tutorial/patterns/index.html new file mode 100644 index 0000000000..a4a8723e39 --- /dev/null +++ b/files/zh-tw/web/svg/tutorial/patterns/index.html @@ -0,0 +1,54 @@ +--- +title: 图案 +slug: Web/SVG/Tutorial/Patterns +translation_of: Web/SVG/Tutorial/Patterns +--- +<p>{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}</p> +<p>pattern（图案）是一个比较难理解的填充类型。同时，pattern的作用很强大，所以在这里需要进行一些讨论，以便对填充模式有一个大致的了解。和渐变一样，<a href="/en/SVG/Element/pattern" title="en/SVG/Element/pattern"><code><pattern></code></a>元素也需要放在SVG文件的<code>&ltldefs></code>段落里。</p> +<p><img align="right" alt="" class="internal" src="/@api/deki/files/350/=SVG_Pattern_Example.png"></p> +<pre><?xml version="1.0" standalone="no"?> +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x=".05" y=".05" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + + </defs> + + <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/> +</svg></pre> +<p>在pattern元素里，你可以使用任意的基本图形元素，也可以按照之前所学的方法给它们设置样式，包括渐变和不透明度。在上面的例子里，我们在pattern元素里放了一个圆形和两个矩形元素，它们相互重叠，其中一个矩形是另一个矩形的两倍大小，用来填满pattern。</p> +<p>pattern最难理解的是定义尺寸和单位。在上面的例子里，我们给pattern元素定义了<code>width</code>和<code>height</code>属性，用来描述pattern占据的尺寸范围，另外还有<code>x</code>和<code>y</code>属性，用来定义pattern起点的偏移量。它们的具体解释如下：</p> +<p>渐变有<code>gradientUnits</code>属性，pattern也有一个类似的属性<code>patternUnits</code>，用来定义属性采用的单位，它的默认值是objectBoundingBox，等同于pattern采用的宽高缩放比是1。在上面的例子里，我们需要pattern的填充效果在纵向和横向都重复4次，所以width和height设置的值都是0.25，意思是pattern的填充效果的宽和高是整个图形宽高的1/4（0.25）。</p> +<p>与渐变不同的是，pattern还有另外一个属性<code>patternContentUnits</code>，用来描述pattern内部形状使用的单位，这个属性的默认值是userSpaceOnUse，它与patternUnits属性相反，即：如果你没定义patternContentUnits，也没有定义patternUnits，那么pattern内部采用的坐标单位，会不同于pattern采用的坐标单位。这个地方可能会有一点不好理解。在上面的例子中，我们考虑到这个图形的尺寸是200px见方，pattern需要在纵向和横向都重复4次，这意味着pattern的尺寸是50*50px的正方形，pattern内部的矩形和圆形应该位于50*50px的范围内，任何超出范围的部分都不会被显示。另外，pattern还有10px的偏移量，由于它是从左上角开始显示，所以x和y属性应该是10/200=0.05。</p> +<p>这里需要说明一下，当图形的尺寸发生变化时，pattern也会自动缩放，适应图形的变化，但是pattern内部的图形不会改变尺寸。所以，尽管我们仍然设置了4次重复，但pattern内部的元素仍然保持原尺寸，所以它们之间有比较大的空白。通过改变<code>patternContentUnits</code>属性，我们可以让所有元素使用同样的单位。</p> +<pre class="eval"> <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> + <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> + <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> + <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +</pre> +<p>现在，由于pattern内部的元素和pattern本身采用相同的单位，我们就不用再设置偏移量去纠正pattern的起始位置，并且，当图形的尺寸放大时，pattern也会自动缩放，所以pattern内部的元素数目和重复次数都不会变化。这里有一个使用userSpaceOnUse的对比例子，如果图形改变尺寸，pattern会保持原尺寸，并且重复更多次，达到填满图形的效果。</p> +<p>在Gecko引擎中，如果圆形的半径小于 0.075将会出现一些问题。（这可能是pattern独有的bug，也可能在所有情况下都是bug，尚不确定。）为了避免这种错误出现，应尽量避免使用objectBoundingBox。</p> +<p>以上这些都不是我们通常理解的pattern。pattern一般会设置一个尺寸，并且独立于图形进行重复。如果像下面这样做，那么pattern和它内部的元素都会被创建在当前用户空间内，并且不会被改变：</p> +<pre class="eval"> <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +</pre> +<p>当然，这意味着当你改变图形的尺寸后，pattern不会缩放。上面提到的三种情况都会被放在下面的例子里，将图形绘制在一个拉长到300px高度的画布上。图示可能并不详尽，你可以在你的应用里改变更多设置项。</p> +<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png">o</p> +<p>{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}</p> +<p>{{ languages( { "ja": "ja/SVG/Tutorial/Patterns"} ) }}</p> diff --git a/files/zh-tw/web/svg/tutorial/positions/index.html b/files/zh-tw/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..dbb250d4cd --- /dev/null +++ b/files/zh-tw/web/svg/tutorial/positions/index.html @@ -0,0 +1,51 @@ +--- +title: 座標定位 +slug: Web/SVG/Tutorial/Positions +tags: + - SVG + - 'SVG:教程' +translation_of: Web/SVG/Tutorial/Positions +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> + +<h2 id="The_grid" name="The_grid">網格</h2> + +<p><img alt="" src="/@api/deki/files/78/=Canvas_default_grid.png"> 對於所有元素，SVG使用的座標系统或者說網格系統，和<a href="/zh-CN/HTML/Canvas" title="zh-CN/HTML/Canvas">Canvas</a>用的差不多（所有電腦繪圖绘图都差不多）。這種座標系统是：以頁面的左上角為(0,0)坐標點，坐標以像素為單位，x軸正方向是向右，y軸正方向是向下。注意，這和你小時候所教的繪圖方式是相反的。但是在HTML文檔中，元素都是用這種方式定位的。</p> + +<h4 id="範例：">範例：</h4> + +<p>元素</p> + +<pre><rect x="0" y="0" width="100" height="100" /> + +</pre> + +<p>定義一个矩形，即從左上角開始，向右延展100px，向下延展100px，形成一个100*100大的矩形。</p> + +<h3 id="什麼是_像素">什麼是 "像素"?</h3> + +<p>基本上，在 SVG 文檔中的1个像素對應輸出設備（比如螢幕）上的1個像素。但是這種情况是可以改變的，否則 SVG 的名字裡也不至於會有“Scalable”（可縮放）這個詞。如同CSS可以定義字體的絕對大小和相對大小，SVG也可以義絕對大小（比如使用“pt”或“cm”標示單位）同時SVG也能使用相對大小，只需给出數字，不標明單位，輸出時就會採用用戶的單位。</p> + +<p>在没有进一步规范说明的情况下，1个用户单位等同于1个屏幕单位。要明确改变这种设定，SVG里有多种方法。我们从<code>svg</code>根元素开始：</p> + +<pre><svg width="100" height="100"> + +</pre> + +<p>上面的元素定義了一個100*100px的SVG畫布，這裡1用戶單位等同於1螢幕單位。</p> + +<pre><svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>> + +</pre> + +<p>這裡定義的畫布尺寸是200*200px。但是，viewBox屬性定義了畫布上可以顯示的區域：從(0,0)點開始，100寬*100高的區域。這個100*100的區域，會放到200*200的畫布上顯示。於是就形成了放大兩倍的效果。</p> + +<p>用戶單位和螢幕單位的映射關係被稱為<strong>用戶座標系統</strong>。除了縮放之外，座標系統還可以旋轉、傾斜、翻轉。預設的用戶座標系統1用戶像素等於設備上的1像素（但是設備上可能會自己定義1像素到底是多大）。在定義了具體尺寸單位的SVG中，比如單位是“cm”或“in”，最終圖形會以實際大小的1比1比例呈現。</p> + +<p>下面是引自SVG1.1規範的一段說明：</p> + +<blockquote> +<p>[…] 假設在用戶的設備環境裡，1px等於0.2822222毫米（即分辨率是90dpi），那麼所有的SVG內容都會按照這種比例處理： […] "1cm" 等於 "35.43307px" （即35.43307用戶單位）；</p> +</blockquote> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> diff --git a/files/zh-tw/web/svg/tutorial/路径/index.html b/files/zh-tw/web/svg/tutorial/路径/index.html new file mode 100644 index 0000000000..e0a107f49a --- /dev/null +++ b/files/zh-tw/web/svg/tutorial/路径/index.html @@ -0,0 +1,239 @@ +--- +title: 路徑 +slug: Web/SVG/Tutorial/路径 +tags: + - SVG +translation_of: Web/SVG/Tutorial/Paths +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> + +<p><code><a href="/en-US/Web/SVG/Element/path"><path></a></code> 元件可說是SVG程式庫中最強大的<a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">基本形狀</a>了，你可以用它來產生線條、曲線、圓弧等形狀。</p> + +<p>路徑(paths) 藉由結合多個直線或曲線來產生複雜形狀。路徑和折線雖然可以產生相似外觀的形狀，例如：<span style="font-size: 1rem; letter-spacing: -0.00278rem;">可由</span><a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes#Polyline" style="font-size: 1rem; letter-spacing: -0.00278rem;">折線</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">組成由單純的直線組成的複雜形狀 。但折線需要產生許多小段的直線去模擬曲線的外觀，如果遇到需要放大的情形，會較難 </span>scale。好好瞭解路徑對於繪製 SVG 是重要的。雖然不建議使用XML編輯器或文字編輯器建立複雜路徑，但了解它們的工作原理，將與助於發現和修復 SVG 的顯示問題。</p> + +<p>path 元素，由一個屬性定義：{{ SVGAttr("d") }}（可參考<a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">基本形狀</a> ）。 <code>"d"</code> 屬性包含了一系列的指令(command)，以及這些指令各自使用的參數。</p> + +<p> </p> + +<p>Each of the commands is instantiated (for example, creating a class, naming and locating it) by a specific letter. For instance, let's move to the x and y coordinates (10, 10). The "Move to" command is called with the letter M. When the parser runs into this letter, it knows you want to move to a point. So, to move to (10,10) you would use the command "M 10 10". After that, the parser begins reading for the next command.</p> + +<p>All of the commands also come in two variants. An <strong>uppercase letter</strong> specifies absolute coordinates on the page, and a <strong>lowercase letter</strong> specifies relative coordinates (e.g. <em>move from the last point 10px up and 7px to the left</em>).</p> + +<p>Coordinates in the <code>"d"</code> attribute are <strong>always unitless</strong> and hence in the user coordinate system. Later, we will learn how paths can be transformed to suit other needs.</p> + +<h2 id="Line_commands">Line commands</h2> + +<p>There are five line commands for <code><path></code> nodes. The first command is the "Move To" or M, which was described above. It takes two parameters, a coordinate ' x ' and coordinate ' y ' to move to. If your cursor already was somewhere on the page, no line is drawn to connect the two places. The "Move To" command appears at the beginning of paths to specify where the drawing should start. e.g. :</p> + +<pre>M x y +</pre> + +<p>or</p> + +<pre>m dx dy</pre> + +<p>In the following example we only have a point at (10,10). Note, though, that it wouldn't show up if you were just drawing the path normally. For example:</p> + +<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10"/> + + <!-- Points --> + <circle cx="10" cy="10" r="2" fill="red"/> + +</svg></pre> + +<p>There are three commands that draw lines. The most generic is the "Line To" command, <code>called with L</code>. <code>L</code> takes two parameters—x and y coordinates—and draws a line from the current position to a new position.</p> + +<pre> L x y (or l dx dy) +</pre> + +<p>There are two abbreviated forms for drawing horizontal and vertical lines. <code>H</code> draws a horizontal line, and <code>V</code> draws a vertical line. Both commands only take one argument since they only move in one direction.</p> + +<pre> H x (or h dx) + V y (or v dy) +</pre> + +<p>An easy place to start is by drawing a shape. We will start with a rectangle (the same type that could be more easily made with a <code><rect></code> element). It's composed of horizontal and vertical lines <span style="line-height: 1.5;">only</span><span style="line-height: 1.5;">:</span></p> + +<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 H 90 V 90 H 10 L 10 10"/> + + <!-- Points --> + <circle cx="10" cy="10" r="2" fill="red"/> + <circle cx="90" cy="90" r="2" fill="red"/> + <circle cx="90" cy="10" r="2" fill="red"/> + <circle cx="10" cy="90" r="2" fill="red"/> + +</svg></pre> + +<p>We can shorten the above path declaration a little bit by using the "Close Path" command, called with <code>Z</code>. This command draws a straight line from the current position back to the first point of the path. It is often placed at the end of a path node, although not always. There is no difference between the uppercase and lowercase command.</p> + +<pre> Z (or z) +</pre> + +<p>So our path above could be shortened to:</p> + +<pre class="brush: xml"> <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> +</pre> + +<p>You can also use the relative form of these commands to draw the same picture. Relative commands are called by using lowercase letters, and rather than moving the cursor to an exact coordinate, they move it relative to its last position. For instance, since our box is 80 x 80, the path element could have been written:</p> + +<pre class="brush: xml"> <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> +</pre> + +<p>The path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start.</p> + +<p>In these examples, it would probably be simpler to use the <polygon> or <polyline> elements. However, paths are used so often in drawing SVG that developers may be more comfortable using them instead. There is no real performance penalty or bonus for using one or the other.</p> + +<h2 id="Curve_commands">Curve commands</h2> + +<p>There are three different commands that you can use to create smooth curves. Two of those curves are Bezier curves, and the third is an "arc" or part of a circle. You might have already gained practical experience with Bezier curves using path tools in Inkscape, Illustrator or Photoshop. For a complete description of the math behind Bezier curves, go to a reference like the one on <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia</a>. There are an infinite number of Bezier curves, but only two simple ones are available in path elements: a cubic one, called with C, and a quadratic one, called with Q.</p> + +<h3 id="Bezier_Curves">Bezier Curves</h3> + +<p>The cubic curve, C, is the slightly more complex curve. Cubic Beziers take in two control points for each point. Therefore, to create a cubic Bezier, you need to specify three sets of coordinates.</p> + +<pre> C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) +</pre> + +<p>The last set of coordinates here (x,y) are where you want the line to end. The other two are control points. (x1,y1) is the control point for the start of your curve, and (x2,y2) is the control point for the end. The control points essentially describe the slope of your line starting at each point. The Bezier function then creates a smooth curve that transfers you from the slope you established at the beginning of your line, to the slope at the other end.</p> + +<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="syntaxbox"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> + <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/> + <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> + <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> + <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/> + <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/> + <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> + <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> + <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> + +</svg> +</pre> + +<p>The example above creates nine Cubic Bezier curves. As the curves move toward the right, the control points become spread out horizontally. As the curves move downward, they become further separated from the end points. The thing to note here is that the curve starts in the direction of the first control point, and then bends so that it arrives along the direction of the second control point.</p> + +<p>You can string together several Bezier curves to create extended, smooth shapes. Often, the control point on one side of a point will be a reflection of the control point used on the other side to keep the slope constant. In this case, you can use a shortcut version of the cubic Bezier, designated by the command <code>S</code> (or <code>s</code>).</p> + +<pre> S x2 y2, x y (or s dx2 dy2, dx dy) +</pre> + +<p><code>S</code> produces the same type of curve as earlier, but if it follows another <code>S</code> command or a <code>C</code> command, the first control point is assumed to be a reflection of the one used previously. If the <code>S</code> command doesn't follow another <code>S</code> or <code>C</code> command, then the current position of the cursor is used as the first control point. In this case the result is the same as what the <code>Q</code> command would have produced with the same parameters. An example of this syntax is shown below, and in the figure to the left the specified control points are shown in red, and the inferred control point in blue.</p> + +<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>The other type of Bezier curve, the quadratic curve called with Q, is actually a simpler curve than the cubic one. It requires one control point which determines the slope of the curve at both the start point and the end point. It takes two arguments: the control point and the end point of the curve. Note that the co-ordinate deltas for <code>q</code> are both relative to the previous point (that is, <code>dx</code> and <code>dy</code> are not relative to <code>dx1</code> and <code>dy1</code>).</p> + +<pre> Q x1 y1, x y (or q dx1 dy1, dx dy) +</pre> + +<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>As with the cubic Bezier curve, there is a shortcut for stringing together multiple quadratic Beziers, called with T.</p> + +<pre> T x y (or t dx dy) +</pre> + +<p>This shortcut looks at the previous control point you used and infers a new one from it. This means that after your first control point, you can make fairly complex shapes by specifying only end points.</p> + +<div class="note"> +<p>This only works if the previous command was a Q or a T command. If it is not, then the control point is assumed to be the same as the previous point, and you'll only draw lines.</p> +</div> + +<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>Both curves produce similar results, although the cubic allows you greater freedom in exactly what your curve looks like. Deciding which curve to use is situational and depends on the amount of symmetry your line has.</p> + +<h3 id="Arcs" name="Arcs">Arcs</h3> + +<p>The other type of curved line you can create using SVG is the arc, called with A. Arcs are sections of circles or ellipses. For a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). Along either of those circles there are two possible paths that you can take to connect the points, so in any situation there are four possible arcs available. Because of that, arcs have to take in quite a few arguments:</p> + +<pre> A rx ry x-axis-rotation large-arc-flag sweep-flag x y + a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy +</pre> + +<p>At its start, the arc element takes in two arguments for the x-radius and y-radius. If you need to, look up <a href="/en-US/Web/SVG/Element/ellipse">ellipses</a> to see how they behave. The final two arguments designate the x and y coordinates to end the stroke. Together, these four values define the basic structure of the arc.</p> + +<p>The third parameter describes the rotation of the arc. This is best explained with an example:</p> + +<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p> + +<pre class="brush: xml"><svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 315 + L 110 215 + A 30 50 0 0 1 162.55 162.45 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> +</svg></pre> + +<p>The example shows a path element that goes diagonally across the page. At its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). In the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. For the second arc, though, the x-axis-rotation is set to -45 degrees. This rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image.</p> + +<p>For the unrotated ellipse in the image above, there are only two different arcs and not four to choose from because the line drawn from the start and end of the arc goes through the center of the ellipse. In a slightly modified example you can see the two ellipses that form the four different arcs:</p> + +<p><img alt="Show the 4 arcs on the Ellipse example" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png" style="height: 320px; width: 320px;"></p> + +<pre><svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"> + <path d="M10 315 + L 110 215 + A 36 60 0 0 1 150.71 170.29 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> + <circle cx="150.71" cy="170.29" r="2" fill="red"/> + <circle cx="110" cy="215" r="2" fill="red"/> + <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/> + <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/> +</svg> +</pre> + +<p>Notice that each of the blue ellipses are formed by two arcs, depending if you travel clockwise or counter-clockwise. Each ellipse has one short arc and one long arc. The two ellipses are just mirror images of each other. They are flipped along the line formed from the start->end points.</p> + +<p>If the start->end points are farther than the ellipse's x and y radius can reach, the ellipse's radii will be minimally expanded so it could reach the start->end points. The interactive codepen at the bottom of this page demonstrates this well. To determine if your ellipse's radii is large enough to require expanding, you would need to solve a system of equations such as <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F36%5E2)+%2B+((215+-+y)%5E2%2F60%5E2)+%3D+1,+((150.71+-+x)%5E2%2F36%5E2)+%2B+((170.29+-+y)%5E2%2F60%5E2)+%3D+1">this on wolfram alpha</a>. This computation is for the non-rotated ellipse with start->end (110, 215)->(150.71, 170.29). The solution, (x, y), is the center of the ellipse(s). The solution will be <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F30%5E2)+%2B+((215+-+y)%5E2%2F50%5E2)+%3D+1,+((162.55+-+x)%5E2%2F30%5E2)+%2B+((162.45+-+y)%5E2%2F50%5E2)+%3D+1">imaginary</a> if your ellipse radii is too small. This second computation is for the non-rotated ellipse with start->end (110, 215)->(162.55, 162.45). The solution has a small imaginary component because the ellipse was just barely expanded.</p> + +<p>The four different paths mentioned above are determined by the next two argument flags. As mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. The first argument is the large-arc-flag. It simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. The second argument is the sweep-flag. It determines if the arc should begin moving at positive angles or negative ones, which essentially picks which of the two circles you will travel around. The example below shows all four possible combinations, along with the two circles for each case.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"> + <path d="M80 80 + A 45 45, 0, 0, 0, 125 125 + L 125 80 Z" fill="green"/> + <path d="M230 80 + A 45 45, 0, 1, 0, 275 125 + L 275 80 Z" fill="red"/> + <path d="M80 230 + A 45 45, 0, 0, 1, 125 275 + L 125 230 Z" fill="purple"/> + <path d="M230 230 + A 45 45, 0, 1, 1, 275 275 + L 275 230 Z" fill="blue"/> +</svg></pre> + +<p>Arcs are an easy way to create pieces of circles or ellipses in your drawings. For instance, a pie chart would require a different arc for each piece.</p> + +<p>If you're transitioning to SVG from <a href="/en/HTML/Canvas">Canvas</a>, arcs can be the hardest thing to learn, but are also much more powerful. Complete circles and ellipses are actually the only shapes that SVG arcs have trouble drawing. Because the start and end points for any path going around a circle are the same point, there are an infinite number of circles that could be chosen, and the actual path is undefined. It's possible to approximate them by making the start and end points of your path slightly askew, and then connecting them with another path segment. For example, you can make a circle with an arc for each semicircle. At that point, it's often easier to use a real circle or ellipse node instead. This interactive demo might help you understand the concepts behind SVG arcs: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (tested in chrome and firefox only, might not work in your browser)</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> |