diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/svg/tutorial | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/svg/tutorial')
18 files changed, 1826 insertions, 0 deletions
diff --git a/files/zh-cn/web/svg/tutorial/basic_shapes/index.html b/files/zh-cn/web/svg/tutorial/basic_shapes/index.html new file mode 100644 index 0000000000..08beec5314 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/basic_shapes/index.html @@ -0,0 +1,146 @@ +--- +title: 基本形状 +slug: Web/SVG/Tutorial/Basic_Shapes +tags: + - SVG + - 'SVG:教程' +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +<p> {{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p> + +<p>这里介绍的几个基本的形状用于大多数的SVG绘图。通过这些形状的命名可以知道其用途。给它们一些属性可以确定它们的位置和大小，但一个元素参考可能包含对元素属性的更准确和完整的描述，这里先不做介绍。然而，由于有些元素可以用在大多数SVG文档中，所以很有必要在这里介绍这部分元素。</p> + +<h2 id="Basic_shapes" name="Basic_shapes">基本形状</h2> + +<p>要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余， 但是它们用起来方便，可让我们的SVG文档简洁易懂。右边的图片展示了所有的基本形状。生成它们的代码如下：</p> + +<p> <img alt="" src="https://developer.mozilla.org/@api/deki/files/359/=Shapes.png"></p> + +<pre><?xml version="1.0" standalone="no"?> +<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + + <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> + <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> + + <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/> + <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" + stroke="orange" fill="transparent" stroke-width="5"/> + + <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" + stroke="green" fill="transparent" stroke-width="5"/> + + <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> +</svg></pre> + +<div class="note"> +<p><strong>注意：</strong><code>stroke</code>、<code>stroke-width</code> <code>和fill</code> 等属性在后面的章节中解释。</p> +</div> + +<h3 id="Rectangles" name="Rectangles">矩形</h3> + +<p>就像你能联想到的，<code>rect</code>元素会在屏幕上绘制一个矩形 。其实只要6个基本属性就可以控制它在屏幕上的位置和形状。 上面的图例中最先展示了2个矩形，虽然这有点冗余了。右边的那个图形设置了rx和ry属性用来控制圆角。如果没有设置圆角，则默认为0。</p> + +<pre><rect x="10" y="10" width="30" height="30"/> +<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/></pre> + +<dl> + <dt>x</dt> + <dd>矩形左上角的x位置</dd> + <dt>y</dt> + <dd>矩形左上角的y位置</dd> + <dt>width</dt> + <dd>矩形的宽度</dd> + <dt>height</dt> + <dd>矩形的高度</dd> + <dt>rx</dt> + <dd>圆角的x方位的半径</dd> + <dt>ry</dt> + <dd>圆角的y方位的半径</dd> +</dl> + +<h3 id="Circle" name="Circle">圆形 </h3> + +<p>正如你猜到的，<code>circle</code>元素会在屏幕上绘制一个圆形。它只有3个属性用来设置圆形。</p> + +<pre><circle cx="25" cy="75" r="20"/></pre> + +<dl> + <dt>r</dt> + <dd>圆的半径</dd> + <dt>cx</dt> + <dd>圆心的x位置</dd> + <dt>cy</dt> + <dd>圆心的y位置</dd> +</dl> + +<h3 id="Ellipse" name="Ellipse">椭圆</h3> + +<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a> 是<code>circle</code>元素更通用的形式，你可以分别缩放圆的x半径和y半径（通常数学家称之为长轴半径和短轴半径）。</p> + +<pre><ellipse cx="75" cy="75" rx="20" ry="5"/></pre> + +<dl> + <dt>rx</dt> + <dd>椭圆的x半径</dd> + <dt>ry</dt> + <dd>椭圆的y半径</dd> + <dt>cx</dt> + <dd>椭圆中心的x位置</dd> + <dt>cy</dt> + <dd>椭圆中心的y位置</dd> +</dl> + +<h3 id="线条">线条</h3> + +<p><a href="/en-US/Web/SVG/Element/line" title="en-US/Web/SVG/Element/line">Line</a> 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。</p> + +<pre><line x1="10" x2="50" y1="110" y2="150"/></pre> + +<dl> + <dt>x1</dt> + <dd>起点的x位置</dd> + <dt>y1</dt> + <dd>起点的y位置</dd> + <dt>x2</dt> + <dd>终点的x位置</dd> + <dt>y2</dt> + <dd>终点的y位置</dd> +</dl> + +<h3 id="Polyline" name="Polyline">折线</h3> + +<p><a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">Polyline</a>是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中：</p> + +<pre><polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/></pre> + +<dl> + <dt>points</dt> + <dd>点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。</dd> +</dl> + +<h3 id="Polygon" name="Polygon">多边形</h3> + +<p><code><a href="https://developer.mozilla.org/en/SVG/Element/polygon" title="en/SVG/Element/polygon">polygon</a></code>和折线很像，它们都是由连接一组点集的直线构成。不同的是，<code>polygon</code>的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。</p> + +<pre><polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/></pre> + +<dl> + <dt>points</dt> + <dd>点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。</dd> +</dl> + +<h3 id="Path" name="Path">路径</h3> + +<p><code>path</code>可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。因为path很强大也很复杂，所以会在<a href="https://developer.mozilla.org/en/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">下一章</a>进行详细介绍。这里只介绍一个定义路径形状的属性。</p> + +<pre><path d="M 20 230 Q 40 205, 50 230 T 90230"/></pre> + +<dl> + <dt>d</dt> + <dd>一个点集数列以及其它关于如何绘制路径的信息。请阅读<a href="https://developer.mozilla.org/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a> 章节以了解更多信息。</dd> +</dl> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/basic_transformations/index.html b/files/zh-cn/web/svg/tutorial/basic_transformations/index.html new file mode 100644 index 0000000000..843cf3f646 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/basic_transformations/index.html @@ -0,0 +1,80 @@ +--- +title: 基础变形 +slug: Web/SVG/Tutorial/Basic_Transformations +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div> + +<p>现在我们准备好开始扭曲我们美丽的图像了。但是首先，让我们正式地介绍{{SVGElement("g")}}元素。利用这个助手，你可以把属性赋给一整个元素集合。实际上，这是它唯一的目的。一个示例：</p> + +<pre class="brush: xml"><g fill="red"> + <rect x="0" y="0" width="10" height="10" /> + <rect x="20" y="0" width="10" height="10" /> +</g> +</pre> + +<p>输出两个红色矩形。</p> + +<p>所有接下来的变形都会用一个元素的<code>transform</code>属性总结。变形可以连缀，只要把它们连接起来就行，用空格隔开。</p> + +<h2 id="平移">平移</h2> + +<p>你能把元素移动一段距离，甚至你可以根据相应的属性定位它。<code>translate()</code>变形方法专门效力于这个目的。</p> + +<pre class="brush: xml"><rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> +</pre> + +<p>该示例将呈现一个矩形，移到点(30,40)，而不是出现在点(0,0)。</p> + +<p>如果没有指定第二个值，它默认被赋值<em>0</em>。</p> + +<h2 id="旋转">旋转</h2> + +<p>旋转一个元素是相当常见的任务。使用<code>rotate()变形就可以了：</code></p> + +<pre class="brush: xml"><rect x="20" y="20" width="20" height="20" transform="rotate(45)" /> +</pre> + +<p>该示例显示了一个方形，旋转了45度。<code>rotate()</code>的值是用角度数指定的。</p> + +<h2 id="斜切">斜切</h2> + +<p>利用一个矩形制作一个斜菱形。可用<code>skewX()</code>变形和<code>skewY()</code>变形。每个需要一角度以确定元素斜切到多远。</p> + +<h2 id="缩放">缩放</h2> + +<p><code>scale()变形</code>改变了元素的尺寸。它需要两个数字，作为比率计算如何缩放。0.5表示收缩到50%。<em>如果第二个数字被忽略了，它默认等于第一个值。</em></p> + +<h2 id="用matrix()实现复杂变形">用<code>matrix()实现复杂变形</code></h2> + +<p>所有上面的变形可以表达为一个2x3的变形矩阵。组合一些变形，可以直接用<code>matrix(a, b, c, d, e, f)变形</code>设置结果矩阵，利用下面的矩阵，它把来自上一个坐标系统的坐标映射到新的坐标系统：</p> + +<p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right. </annotation></semantics></math></p> + +<p>请看<a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">关于SVG变形文档的具体实例</a>。关于该属性的详细信息可以在<a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG推荐标准</a>上找到。</p> + +<h2 id="坐标系统上的效果">坐标系统上的效果</h2> + +<p>如果使用了变形，你会在元素内部建立了一个新的坐标系统，应用了这些变形，你为该元素和它的子元素指定的单位可能不是1:1像素映射。但是依然会根据这个变形进行歪曲、斜切、转换、缩放操作。</p> + +<pre class="brush: xml"><g transform="scale(2)"> + <rect width="50" height="50" /> +</g> +</pre> + +<p>上面示例中的结果矩形将是100x100px，如果你使用了比如说userSpaceOnUse等属性，将出现更吸引人的效果。</p> + +<h2 id="SVG嵌在SVG内部">SVG嵌在SVG内部</h2> + +<p>比之HTML，SVG允许你无缝嵌入别的svg元素。因此你可以利用内部<code>svg</code>元素的属性<code>viewBox</code>、属性<code>width</code>和属性<code>height</code>简单创建一个新的坐标系统。</p> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <svg width="100" height="100" viewBox="0 0 50 50"> + <rect width="50" height="50" /> + </svg> +</svg> +</pre> + +<p>以上示例基本上跟它上面的示例有同样的效果，也就是矩形将是指定的两倍大。</p> + +<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div> diff --git a/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html new file mode 100644 index 0000000000..c796d2a4d0 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html @@ -0,0 +1,142 @@ +--- +title: 剪切和遮罩 +slug: Web/SVG/Tutorial/Clipping_and_masking +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Clipping_and_masking +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p> + +<p>擦除已经创建的元素的部分内容，最初看起来有点矛盾。但是如果你打算在SVG中创建一个半圆形，你将很快发现下面的属性的作用了。</p> + +<p><strong>Clipping</strong>用来移除在别处定义的元素的部分内容。在这里，任何半透明效果都是不行的。它只能要么显示要么不显示。</p> + +<p><strong>Masking</strong>允许使用透明度和灰度值遮罩计算得的软边缘。</p> + +<h3 id="创建剪切">创建剪切</h3> + +<p>我们在一个圆形的基础上创建上面提到的半圆形：</p> + +<pre class="brush: html"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <clipPath id="cut-off-bottom"> + <rect x="0" y="0" width="200" height="100" /> + </clipPath> + </defs> + + <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> +</svg> +</pre> + +<p>在(100,100)创建一个圆形，半径是100。属性<code>clip-path</code>引用了一个带单个rect元素的<code>{{ SVGElement("clipPath") }}</code>元素。它内部的这个矩形将把画布的上半部分涂黑。注意，<code>clipPath</code>元素经常放在一个<code>defs</code>元素内。</p> + +<p>然而，该rect不会被绘制。它的象素数据将用来确定：圆形的哪些像素需要最终呈现出来。因为矩形只覆盖了圆形的上半部分，所以下半部分将消失了：</p> + +<div class="hidden"> +<h2 id="Creating_clips">Creating_clips</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <clipPath id="cut-off-bottom"> + <rect x="0" y="0" width="200" height="100" /> + </clipPath> + </defs> + + <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> +</svg> +</pre> + + +</div> + +<p>{{ EmbedLiveSample('Creating_clips','240','240','/files/3224/clipdemo.png') }}</p> + +<p>现在我们已经有了一个半圆形，不用处理弧形路径元素。对于这个剪切，<code>clipPath</code>内部的每个路径都会被检查到、与它的描边属性一起被估值、变形。然后目标的位于clipPath内容的结果的透明度区域的每一块都不会呈现。颜色、不透明度都没有这种效果，因为它们不能让一部分彻底消失。</p> + +<h3 id="遮罩">遮罩</h3> + +<p>遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出，你可以利用遮罩效果实现这一点。</p> + +<pre class="brush: html"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <linearGradient id="Gradient"> + <stop offset="0" stop-color="white" stop-opacity="0" /> + <stop offset="1" stop-color="white" stop-opacity="1" /> + </linearGradient> + <mask id="Mask"> + <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" /> + </mask> + </defs> + + <rect x="0" y="0" width="200" height="200" fill="green" /> + <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" /> +</svg> +</pre> + +<p>你看到有一个绿色填充的矩形在底层，一个红色填充的矩形在上层。后者有一个<code>mask</code>属性指向一个<code>mask</code>元素。<code>mask</code>元素的内容是一个单一的<code>rect</code>元素，它填充了一个透明到白色的渐变。作为红色矩形继承<code>mark</code>内容的<code>alpha</code>值（透明度）的结果，我们看到一个从绿色到红色渐变的输出：</p> + +<div class="hidden"> +<h2 id="Masking">Masking</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <linearGradient id="Gradient"> + <stop offset="0" stop-color="black" /> + <stop offset="1" stop-color="white" /> + </linearGradient> + <mask id="Mask"> + <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" /> + </mask> + </defs> + + <rect x="0" y="0" width="200" height="200" fill="green" /> + <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" /> +</svg> +</pre> + + +</div> + +<p>{{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}</p> + +<h3 id="用opacity定义透明度">用<code>opacity定义透明度</code></h3> + +<p>有一个简单方法可以用来为整个元素设置透明度。它就是<code>opacity</code>属性：</p> + +<pre class="brush: xml"><rect x="0" y="0" width="100" height="100" opacity=".5" /> +</pre> + +<p>上面的矩形将绘制为半透明。填充和描边还有两个属性是<code>fill-opacity</code>和<code>stroke-opacity</code>，分别用来控制填充和描边的不透明度。需要注意的是描边将绘制在填充的上面。因此，如果你在一个元素上设置了描边透明度，但它同时设有填充，则描边的一半应用填充色，另一半将应用背景色。</p> + +<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > + <rect x="0" y="0" width="200" height="200" fill="blue" /> + <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> +</svg> +</pre> + +<div class="hidden"> +<h2 id="Transparency_with_opacity">Transparency_with_opacity</h2> + +<h3 id="HTML_3">HTML</h3> + +<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="0" y="0" width="200" height="200" fill="blue" /> + <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> +</svg> +</pre> +</div> + +<p>{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}</p> + +<p>你看到这个示例，红色的圆形在蓝色的背景上，黄色描边设置为50%不透明度，导到双色描边的效果。</p> + +<h2 id="利用广为人知的CSS技术">利用广为人知的CSS技术</h2> + +<p>Web开发工具箱中有一个很有用的工具是<code>display:none</code>。它虽然几无悬念，但是依然可以在SVG上使用该CSS属性，连同CSS2定义的<code>visibility</code>和<code>clip</code>属性。为了恢复以前设置的<code>display:none</code>，知道这一点很重要：所有的SVG元素的初始<code>display</code>值都是<code>inline</code>。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..65eeaebad8 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,140 @@ +--- +title: 填充和边框 +slug: Web/SVG/Tutorial/Fills_and_Strokes +tags: + - Beginner + - NeedsLiveSample + - SVG + - Tutorial +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p> + +<p>可以使用几种方法来着色（包括指定对象的属性）使用内联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>这种）、rgb值（像rgb(255,0,0)这种）、十六进制值、rgba值，等等。</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 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>属性，如上所示。它控制边框终点的形状。</p> + +<p><code>stroke-linecap</code>属性的值有三种可能值：</p> + +<ul> + <li><code>butt</code>用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。</li> + <li><code>square</code>的效果差不多，但是会稍微超出<code>实际路径</code>的范围，超出的大小由<code>stroke-width</code>控制。</li> + <li><code>round</code>表示边框的终点是圆角，圆角的半径也是由<code>stroke-width</code>控制的。</li> +</ul> + +<p>还有一个<code>stroke-linejoin</code>属性，用来控制两条描边线段之间，用什么方式连接。</p> + +<p><img 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 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>属性的参数，是一组用逗号分割的数字组成的数列。注意，和<code>path</code>不一样，这里的数字<strong>必须</strong>用逗号分割（空格会被忽略）。每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。所以在上面的例子里，第二个路径会先做5个像素单位的填色，紧接着是5个空白单位，然后又是5个单位的填色。如果你想要更复杂的虚线模式，你可以定义更多的数字。第一个例子指定了3个数字，这种情况下，数字会循环两次，形成一个偶数的虚线模式（奇数个循环两次变偶数个）。所以该路径首先渲染5个填色单位，10个空白单位，5个填色单位，然后回头以这3个数字做一次循环，但是这次是创建5个空白单位，10个填色单位，5个空白单位。通过这两次循环得到偶数模式，并将这个偶数模式不断重复。</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>填充</code>和<code>描边</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>等，但是不包括下面会提到的渐变和图案等功能。另外，<code>width</code>、<code>height</code>，以及路径的命令等等，都不能用css设置。判断它们能不能用CSS设置还是比较容易的。</p> + +<div class="note style-wrap"><a class="external external-icon" href="http://www.w3.org/TR/SVG/propidx.html" title="http://www.w3.org/TR/SVG/propidx.html">SVG规范</a>将属性区分成properties和其他attributes，前者是可以用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里这样的<style>一般放在<code><head></code>里，在svg里<style>则放在<a href="https://developer.mozilla.org/en/SVG/Element/defs" title="en/SVG/Element/defs"><code><defs></code></a>标签里。<code><defs></code>表示定义，这里面可以定义一些不会在SVG图形中出现、但是可以被其他元素使用的元素。</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>如上把样式放到一块你可以更轻松地调整一大组元素的样式，同样你也可以使用<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 external-icon" 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("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/filter_effects/index.html b/files/zh-cn/web/svg/tutorial/filter_effects/index.html new file mode 100644 index 0000000000..0329562b11 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/filter_effects/index.html @@ -0,0 +1,198 @@ +--- +title: 滤镜效果 +slug: Web/SVG/Tutorial/Filter_effects +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Filter_effects +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p> + +<p>在某些情况下，一些基本的 SVG 图形并不能提供某种想要达到的效果。比如常见的阴影效果，就不能合理地与渐变类元素（<code><linearGradient></code>, <code><radialGradient></code>）一起被创建。滤镜（Filter）就是 SVG 中用于创建复杂效果的一种机制。</p> + +<p>下面是一个为 SVG 内容添加模糊效果的基本示例。尽管基本的模糊效果可以使用渐变类元素创建，但是使用模糊滤镜可以做更多的事情。</p> + +<h2 id="示例">示例</h2> + +<p>滤镜通过 {{SVGElement('filter')}} 元素进行定义，并且置于 <code><defs></code> 区块中。在 <code>filter</code> 标签中提供一系列<em>图元</em>（<em>primitives</em>），以及在前一个基本变换操作上建立的另一个操作（比如添加模糊后又添加明亮效果）。如果要应用所创建的滤镜效果，只需要为 SVG 图形元素设置 {{SVGAttr('filter')}} 属性即可。</p> + +<pre class="brush: html"><svg width="250" viewBox="0 0 200 85" + xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <!-- Filter declaration --> + <filter id="MyFilter" filterUnits="userSpaceOnUse" + x="0" y="0" + width="200" height="120"> + + <!-- offsetBlur --> + <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> + <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> + + <!-- litPaint --> + <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" + specularExponent="20" lighting-color="#bbbbbb" + result="specOut"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> + <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> + <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" + k1="0" k2="1" k3="1" k4="0" result="litPaint"/> + + <!-- merge offsetBlur + litPaint --> + <feMerge> + <feMergeNode in="offsetBlur"/> + <feMergeNode in="litPaint"/> + </feMerge> + </filter> + </defs> + + <!-- Graphic elements --> + <g filter="url(#MyFilter)"> + <path fill="none" stroke="#D90000" stroke-width="10" + d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /> + <path fill="#D90000" + d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> + <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" > + <text x="52" y="52">SVG</text> + </g> + </g> +</svg> +</pre> + +<div class="hidden"> +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><svg width="250" viewBox="0 0 200 85" + xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <!-- Filter declaration --> + <filter id="MyFilter" filterUnits="userSpaceOnUse" + x="0" y="0" + width="200" height="120"> + + <!-- offsetBlur --> + <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> + <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> + + <!-- litPaint --> + <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" + specularExponent="20" lighting-color="#bbbbbb" + result="specOut"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> + <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> + <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" + k1="0" k2="1" k3="1" k4="0" result="litPaint"/> + + <!-- merge offsetBlur + litPaint --> + <feMerge> + <feMergeNode in="offsetBlur"/> + <feMergeNode in="litPaint"/> + </feMerge> + </filter> + </defs> + + <!-- Graphic elements --> + <g filter="url(#MyFilter)"> + <path fill="none" stroke="#D90000" stroke-width="10" + d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /> + <path fill="#D90000" + d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> + <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" > + <text x="52" y="52">SVG</text> + </g> + </g> +</svg> +</pre> + + +</div> + +<p>{{ EmbedLiveSample('Example', '100%', 120) }}</p> + +<h3 id="步骤_1">步骤 1</h3> + +<pre class="brush: html"><feGaussianBlur in="SourceAlpha" + stdDeviation="4" + result="blur"/></pre> + +<p>设置 {{SVGElement('feGaussianBlur')}} 中的 <code>in</code> 属性为 <code>"SourceAlpha"</code> 值，即原图像的 alpha 通道，并设置了模糊度为 4 以及把 <code>result</code> 保存在了一个名为 "blur" 的临时缓冲区中。</p> + +<h3 id="步骤_2">步骤 2</h3> + +<pre class="brush: html"><feOffset in="blur" + dx="4" dy="4" + result="offsetBlur"/></pre> + +<p>{{SVGElement('feOffset')}} 设置 <code>in</code> 的值为 "blur"，即我们前面保存 <code>result</code> 的那个临时缓冲区。然后设置相对坐标，向右偏移 4，向下偏移 4。最后把结果 <code>result</code> 保存到名为 "offsetBlur" 的缓冲区中。步骤1、2其实是创建图形阴影的两个图元。</p> + +<h3 id="步骤_3">步骤 3</h3> + +<pre class="brush: html"><feSpecularLighting in="offsetBlur" + surfaceScale="5" specularConstant=".75" + specularExponent="20" lighting-color="#bbbbbb" + result="specOut"> + <fePointLight x="-5000" y="-10000" z="20000"/> +</feSpecularLighting></pre> + +<p>{{SVGelement('feSpecularLighting')}} 设置输入源 <code>in</code> 为 "offsetBlur"，将会生成一个光照效果，并将结果 <code>result</code> 保存在 "specOut" 中。</p> + +<h3 id="步骤_4">步骤 4</h3> + +<pre class="brush: html"><feComposite in="specOut" in2="SourceAlpha" + operator="in" + result="specOut"/></pre> + +<p>第一个 {{SVGElement('feComposite')}} 元素设置输入源为 "specOut"，第二个输入源（<code>in2</code>）为 "SourceAlpha"，将 "specOut" 的结果效果遮盖掉，以致于最后的结果不会大于 "SourceAlpha"（源图像），最后覆盖输出结果 <code>result</code> 为 "specOut"。</p> + +<h3 id="步骤_5">步骤 5</h3> + +<pre><feComposite in="SourceGraphic" in2="specOut" + operator="arithmetic" + k1="0" k2="1" k3="1" k4="0" + result="litPaint"/></pre> + +<p>第二个 {{SVGElement('feComposite')}} 设置 <code>in</code> 为 "SourceGraphic" 和 "specOut"，即在 "SourceGraphic" 之上添加 "specOut" 的效果，复合模式为 "arithmetic"，然后保存结果为 "litPaint"。</p> + +<h3 id="步骤_6">步骤 6</h3> + +<pre><feMerge> + <feMergeNode in="offsetBlur"/> + <feMergeNode in="litPaint"/> +</feMerge></pre> + +<p>最后，{{SVGElement('feMerge')}} 元素合并了阴影效果 "offsetBlur" 和源图像的光照效果 "litPaint"。</p> + +<div style="display: flex; text-align: center;"> +<div><img alt="Source graphic" src="https://mdn.mozillademos.org/files/16310/filters01-0.png" style="height: 70px; width: 115px;"> +<p>源图像</p> +</div> + +<div><img alt="Primitive 1" src="https://mdn.mozillademos.org/files/16311/filters01-1.png" style="height: 70px; width: 115px;"> +<p>图元 1</p> +</div> + +<div><img alt="Primitive 2" src="https://mdn.mozillademos.org/files/16312/filters01-2.png" style="height: 70px; width: 115px;"> +<p>图元 2</p> +</div> + +<div><img alt="Primitive 3" src="https://mdn.mozillademos.org/files/16313/filters01-3.png" style="height: 70px; width: 115px;"> +<p>图元 3</p> +</div> + +<div><img alt="Primitive 4" src="https://mdn.mozillademos.org/files/16314/filters01-4.png" style="height: 70px; width: 115px;"> +<p>图元 4</p> +</div> + +<div><img alt="Primitive 5" src="https://mdn.mozillademos.org/files/16315/filters01-5.png" style="height: 70px; width: 115px;"> +<p>图元 5</p> +</div> + +<div><img alt="Primitive 6" src="https://mdn.mozillademos.org/files/16316/filters01-6.png" style="height: 70px; width: 115px;"> +<p>图元 6</p> +</div> +</div> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/getting_started/index.html b/files/zh-cn/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..343a468a5b --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,96 @@ +--- +title: 入门 +slug: Web/SVG/Tutorial/Getting_Started +tags: + - SVG + - SVG教程 + - 起步 +translation_of: Web/SVG/Tutorial/Getting_Started +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/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" + width="300" height="200" + 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 href="https://mdn.mozillademos.org/files/3075/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的doctype声明，因为基于SVG的DTD验证导致的问题比它能解决的问题更多。</li> + <li>SVG 2之前，version属性和baseProfile属性用来供其他类型的验证识别SVG的版本。SVG 2不推荐使用version和baseProfile这两个属性。</li> + <li>作为XML的一种方言，SVG必须正确的绑定命名空间 （在xmlns属性中绑定）。 请阅读<a href="https://developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course">命名空间速成</a> 页面获取更多信息。</li> + </ul> + </li> + <li>绘制一个完全覆盖图像区域的矩形 <code><a href="/en/SVG/Element/rect" title="en/SVG/Element/rect"><rect/></a>，</code>把背景颜色设为红色。</li> + <li><code><font face="Open Sans, sans-serif">一个半径80px的绿色圆圈</font><a href="/en/SVG/Element/circle" title="en/SVG/Element/circle"><circle/></a></code>绘制在红色矩形的正中央 （向右偏移150px，向下偏移100px）。</li> + <li>绘制文字“SVG”。文字被填充为白色， 通过设置居中的锚点把文字定位到期望的位置：在这种情况下，中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置，确保最后的样式是美观的。</li> +</ol> + +<h3 id="SVG文件的基本属性">SVG文件的基本属性</h3> + +<ul> + <li>最值得注意的一点是元素的渲染顺序。SVG文件全局有效的规则是“后来居上”，越后面的元素越可见。</li> + <li>web上的svg文件可以直接在浏览器上展示，或者通过以下几种方法嵌入到HTML文件中： + <ul> + <li>如果HTML是XHTML并且声明类型为<code>application/xhtml+xml，</code>可以直接把SVG嵌入到XML源码中。</li> + <li>如果HTML是HTML5并且浏览器支持HTML5，同样可以直接嵌入SVG。然而为了符合HTML5标准，可能需要做一些语法调整。</li> + <li>可以通过 <code>object</code> 元素引用SVG文件： + <pre> <object data="image.svg" type="image/svg+xml" /></pre> + </li> + <li>类似的也可以使用 <code>iframe</code> 元素引用SVG文件： + <pre> <iframe src="image.svg"></iframe></pre> + </li> + <li>理论上同样可以使用 <code>img</code> 元素，但是在低于4.0版本的Firefox 中不起作用。</li> + <li>最后SVG可以通过JavaScript动态创建并注入到HTML DOM中。 这样具有一个优点，可以对浏览器使用替代技术，在不能解析SVG的情况下，可以替换创建的内容。</li> + </ul> + 阅读<a href="/en/SVG_In_HTML_Introduction" title="en/svg in html introduction">this dedicated article</a> 以深入了解该话题。</li> + <li>SVG如何处理大小和单位将在<a href="https://developer.mozilla.org/zh-cn/docs/Web/SVG/Tutorial/Positions">下一页</a>详解。</li> +</ul> + +<h3 id="SVG_File_Types" name="SVG_File_Types">SVG 文件类型</h3> + +<p>SVG文件有两种形式。普通SVG文件是包含SVG标记的简单文本文件。推荐使用“.svg”（全部小写）作为此类文件的扩展名。</p> + +<p>由于在某些应用（比如地图应用等）中使用时，SVG文件可能会很大，SVG标准同样允许gzip压缩的SVG文件。推荐使用“.svgz”（全部小写）作为此类文件扩展名 。不幸的是，如果服务器是微软的IIS服务器，使gzip压缩的SVG文件在所有的可用SVG的用户代理上可靠地起作用是相当困难的，而且Firefox不能在本地机器上加载gzip压缩的SVG文件。 除非知道处理发布内容的web服务器可以正确的处理gzip，否则要避免使用gzip压缩的SVG。</p> + +<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">关于web服务器的小提示</h3> + +<p>如果你已经知道了如何创建基本SVG文件，下一步就是把它们上传到web服务器，但是在这阶段有一些陷阱。对于普通SVG文件，服务器应该会发送下面的HTTP头：</p> + +<pre>Content-Type: image/svg+xml +Vary: Accept-Encoding</pre> + +<p>对于gzip压缩的SVG文件，服务器应该会发送下面的HTTP头：</p> + +<pre>Content-Type: image/svg+xml +Content-Encoding: gzip +Vary: Accept-Encoding</pre> + +<p>可以利用<a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Headers">Network Monitor panel</a>或者<a class="external" href="http://web-sniffer.net/" style="line-height: 1.5;">web-sniffer.net</a>之类的网站来检查服务器是否给SVG文件发送正确的HTTP头，向<a href="http://web-sniffer.net/">web-sniffer.net</a>提交你的一个SVG文件的链接，然后查看HTTP 响应头。如果发现服务器没有发送上述的响应头部值，那么你应该联系你的服务器供应商。<span style="line-height: 1.5;">如果不能说服他们为SVG修正服务器配置，可能还有一些我们可以自行解决的办法。 请阅读SVG维基的</span><a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration" style="line-height: 1.5;">server configuration page</a>以找到一些简单的解决方案。</p> + +<p>服务器配置错误是SVG加载失败的常见原因，所以一定要确保你的服务器配置正确。如果不能把服务器配置成给SVG文件发送正确的响应头，这时Firefox很有可能把该文件的标记显示成文本或乱码，甚至会要求查看者选择打开文件的应用程序。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p> + +<p>{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}</p> diff --git a/files/zh-cn/web/svg/tutorial/gradients/index.html b/files/zh-cn/web/svg/tutorial/gradients/index.html new file mode 100644 index 0000000000..b67d799905 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/gradients/index.html @@ -0,0 +1,177 @@ +--- +title: 渐变 +slug: Web/SVG/Tutorial/Gradients +translation_of: Web/SVG/Tutorial/Gradients +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p> + +<p>并非只能简单填充颜色和描边，更令人兴奋的是，你还可以创建和并在填充和描边上应用渐变色。</p> + +<p>有两种类型的渐变：线性渐变和径向渐变。你<strong>必须</strong>给渐变内容指定一个id属性，否则文档内的其他元素就不能引用它。为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。</p> + +<h2 id="SVGLinearGradient" name="SVGLinearGradient">线性渐变</h2> + +<p>线性渐变沿着直线改变颜色，要插入一个线性渐变，你需要在SVG文件的<code>defs元素</code>内部，创建一个{{SVGElement('linearGradient')}} 节点。</p> + +<h3 id="基础示例">基础示例</h3> + +<pre class="brush: html"><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>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p> + +<p>以上是一个应用了线性渐变的<code><rect></code>元素的示例。线性渐变内部有几个{{SVGElement('stop')}} 结点，这些结点通过指定位置的offset（偏移）属性和stop-color（颜色中值）属性来说明在渐变的特定位置上应该是什么颜色；可以直接指定这两个属性值，也可以通过CSS来指定他们的值，该例子中混合使用了这两种方法。例如：该示例中指明了渐变开始颜色为红色，到中间位置时变成半透明的黑色，最后变成蓝色。虽然你可以根据需求按照自己的喜好插入很多中间颜色，但是偏移量应该始终从0%开始（或者0也可以，百分号可以扔掉），到100%（或1）结束。如果<code>stop</code>设置的位置有重合，将使用XML树中较晚设置的值。而且，类似于填充和描边，你也可以指定属性<code>stop-opacity</code>来设置某个位置的半透明度（同样，对于FF3你也可以设置rgba值）。</p> + +<pre class="eval"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> +</pre> + +<p>使用渐变时，我们需要在一个对象的属性<code>fill</code>或属性<code>stroke</code>中引用它，这跟你在CSS中使用<code>url</code>引用元素的方法一样。在本例中，url只是一个渐变的引用，我们已经给这个渐变一个ID——“Gradient”。要想附加它，将属性<code>fill</code>设置为<code>url(#Gradient)</code>即可。现在对象就变成多色的了，也可以用同样的方式处理<code>stroke</code>。</p> + +<p><code><linearGradient>元素还需要一些其他的属性值，它们指定了渐变的大小和出现范围。渐变的方向可以通过两个点来控制，它们分别是属性x1、x2、y1和y2，这些属性定义了渐变路线走向。渐变色默认是水平方向的，但是通过修改这些属性，就可以旋转该方向。下例中的Gradient2创建了一个垂直渐变。</code></p> + +<pre class="eval"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> +</pre> + +<div class="note"><strong>注意:</strong> 你也可以在渐变上使用<code>xlink:href属性。如果</code>使用了该属性时，一个渐变的属性和颜色中值（stop）可以被另一个渐变包含引用。在下例中，你就不需要再Grandient2中重新创建全部的颜色中值（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</a>" xlink:href="#Gradient1"/> +</pre> +尽管通常你可能在文档的顶部就定义了Gradient1，但我在结点上直接包含了xlink的命名空间，关于这点的更多信息我们会在<a href="/en-US/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/Web/SVG/Tutorial/Other content in SVG">讨论图片</a>的时候详解。</div> + +<h2 id="Radial_Gradient" name="Radial_Gradient">径向渐变</h2> + +<p>径向渐变与线性渐变相似，只是它是从一个点开始发散绘制渐变。创建径向渐变需要在文档的<code>defs</code>中添加一个{{SVGElement('radialGradient')}}元素</p> + +<h3 id="示例">示例</h3> + +<pre class="brush: html"><?xml version="1.0" standalone="no"?> +<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="RadialGradient1"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="RadialGradient2" 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(#RadialGradient1)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/> + +</svg></pre> + +<p>{{ EmbedLiveSample('Radial_Gradient','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}</p> + +<p>中值（stops）的使用方法与之前一致，但是现在这个对象的颜色是中间是红色的，且向着边缘的方向渐渐的变成蓝色。跟线性渐变一样，<code><radialGradient></code> 节点可以有多个属性来描述其位置和方向，但是它更加复杂。径向渐变也是通过两个点来定义其边缘位置，两点中的第一个点定义了渐变结束所围绕的圆环，它需要一个中心点，由cx和cy属性及半径r来定义，通过设置这些点我们可以移动渐变范围并改变它的大小，如上例的第二个<rect>所展示的。</p> + +<p>第二个点被称为焦点，由fx和fy属性定义。第一个点描述了渐变边缘位置，焦点则描述了渐变的中心，如下例。</p> + +<h3 id="中心和焦点">中心和焦点</h3> + +<pre class="brush: html"><?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>{{ EmbedLiveSample('Center_and_focal_point','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}</p> + +<p>因为如果焦点如之前描述的那样被移到圆圈的外面，渐变将不能正确呈现，所以该点会被假定在圆圈范围内。如果没有给出焦点，将认为该点与中心点的位置一致。</p> + +<p>线性渐变和径向渐变都需要一些额外的属性用于描述渐变过程，这里我希望额外提及一个<code>spreadMethod</code>属性，该属性控制了当渐变到达终点的行为，但是此时该对象尚未被填充颜色。这个属性可以有三个值：pad、reflect或repeat。Pad就是目前我们见到的效果，即当渐变到达终点时，最终的偏移颜色被用于填充对象剩下的空间。reflect会让渐变一直持续下去，不过它的效果是与渐变本身是相反的，以100%偏移位置的颜色开始，逐渐偏移到0%位置的颜色，然后再回到100%偏移位置的颜色。repeat也会让渐变继续，但是它不会像reflect那样反向渐变，而是跳回到最初的颜色然后继续渐变。</p> + +<h3 id="spreadMethod">spreadMethod</h3> + +<pre class="brush: html"><?xml version="1.0" standalone="no"?> + +<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="GradientPad" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="pad"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="GradientRepeat" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="repeat"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="GradientReflect" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="reflect"> + <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(#GradientPad)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/> + <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/> + + <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text> + <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text> + <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text> + +</svg></pre> + +<p>{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}</p> + +<p>两种渐变都有一个叫做 <code>gradientUnits（渐变单元）</code>的属性，它描述了用来描述渐变的大小和方向的单元系统。该属性有两个值：<code>userSpaceOnUse</code> 、<code>objectBoundingBox。默认值为objectBoundingBox，我们目前看到的效果都是在这种系统下的，它大体上定义了对象的渐变大小范围，所以你只要指定从0到1的坐标值，渐变就会自动的缩放到对象相同大小。</code>userSpaceOnUse使用绝对单元，所以你必须知道对象的位置，并将渐变放在同样地位置上。上例中的radialGradient需要被重写成：</p> + +<pre class="eval"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"> +</pre> + +<p>你也可以利用属性<code>gradientTransform</code>给渐变添加额外的变化，但是因为我们还没有介绍<code><a href="/en-US/Web/SVG/Tutorial/Basic_Transformations" title="en-US/Web/SVG/Tutorial/Basic Transformations">transforms</a></code>，所以我们将在后续的章节中介绍它。</p> + +<p>如果对象边界框不是一个正方形，处理<code>gradientUnits="objectBoundingBox"</code>还有一些其他警告<code>，但是这些方法特别复杂因此有待一些了解得更深的人来解释他们。</code></p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/index.html b/files/zh-cn/web/svg/tutorial/index.html new file mode 100644 index 0000000000..3dc8d31499 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/index.html @@ -0,0 +1,58 @@ +--- +title: SVG教程 +slug: Web/SVG/Tutorial +tags: + - SVG + - SVG教程 + - 中间体 + - 需要内容 + - 需要帮助 + - 需要更新 +translation_of: Web/SVG/Tutorial +--- +<p>可缩放矢量图形，即<a href="/zh-CN/SVG" title="zh-CN/SVG">SVG</a>，是W3C XML的分支语言之一，用于标记可缩放的矢量图形。目前SVG在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-CN/Web/SVG/Tutorial/Introduction" title="zh-CN/SVG/Tutorial/Introduction">引言</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Getting_Started" title="zh-CN/SVG/Tutorial/Getting_Started">入门</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Positions" title="zh-CN/SVG/Tutorial/Positions">坐标定位</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Basic_Shapes" title="zh-CN/SVG/Tutorial/Basic_Shapes">基本形状</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Paths" title="zh-CN/SVG/Tutorial/Paths">路径</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Fills_and_Strokes" title="zh-CN/SVG/Tutorial/Fills_and_Strokes">填充与边框</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Gradients" title="zh-CN/SVG/Tutorial/Gradients">渐变</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Patterns" title="zh-CN/SVG/Tutorial/Patterns">图案</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Texts" title="zh-CN/SVG/Tutorial/Texts">文字</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Basic_Transformations" title="zh-CN/SVG/Tutorial/Basic_Transformations">基本变换</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Clipping_and_masking" title="zh-CN/SVG/Tutorial/Clipping_and_masking">裁剪和遮罩</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Other_content_in_SVG" title="zh-CN/SVG/Tutorial/Other content in SVG">其他SVG内容</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Filter_effects" title="zh-CN/SVG/Tutorial/Filter effects">滤镜效果</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/SVG_fonts" title="zh-CN/SVG/Tutorial/SVG fonts">SVG字体</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/SVG_Image_Tag" title="zh-CN/SVG/Tutorial/SVG Image Tag">SVG的Image标签</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Tools_for_SVG" title="zh-CN/SVG/Tutorial/Tools_for_SVG">SVG工具</a></li> +</ul> + +<p>下面罗列的主题更高级，所以需要单独列出教程。</p> + +<h5 id="JavaScript脚本化SVG">JavaScript脚本化SVG</h5> + +<p>待定（TBD：To be determined）</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-cn/web/svg/tutorial/introduction/index.html b/files/zh-cn/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..44f8a61317 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/introduction/index.html @@ -0,0 +1,43 @@ +--- +title: 引言 +slug: Web/SVG/Tutorial/Introduction +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> + +<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"><a href="/en/SVG" title="en/SVG">SVG</a>是一种<a href="/en/XML" title="en/XML">XML</a>语言，类似XHTML，可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。</p> + +<p>SVG诞生于1999年，之前有几个相互竞争的格式规范被提交到<a class="external" href="http://www.w3.org" title="en/W3C">W3C</a>，但是都没有获得批准。主流浏览器均支持SVG。加载慢是SVG的一个缺点。但是SVG也有自身的优点，比如它实现了DOM接口（比Canvas方便），不需要安装第三方扩展(extensions，原文有误，应该是插件plugins，类似flash)。当然，是否使用SVG还要取决于你要实现什么。</p> + +<h3 id="基本要素">基本要素</h3> + +<p>HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。一个简单的SVG文档由<code>{{ SVGElement('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">JavaScript</a>和<a href="/en/CSS" title="en/CSS">CSS</a>），也会出现类似的情况。</p> + +<p>所有的现代浏览器都支持SVG，在某些情况下甚至几个版本都支持SVG。<a class="external" href="https://caniuse.com/#feat=svg">Can I use</a>上有一份比较详细的支持SVG的浏览器列表，Firefox 1.5以后的版本支持SVG的部分内容，并且支持的程度越来越高。希望通过这份教程，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="/zh-CN/docs/Web/API/Document_Object_Model#SVG_%E6%8E%A5%E5%8F%A3" title="en/SVG/Interface">接口参考</a>，学习其他你需要知道的内容。</p> + +<h3 id="SVG的种类">SVG的种类</h3> + +<p>自从2003年成为W3C推荐标准以来，最接近的“完整版”SVG版本是1.1版，它基于1.0版，并且增加了更多便于实现的模块化内容，SVG1.1的第二个版本在2011年成为推荐标准，完整的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("Web/SVG/Tutorial", "Web/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-cn/web/svg/tutorial/other_content_in_svg/index.html b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html new file mode 100644 index 0000000000..82bb1edf5b --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html @@ -0,0 +1,52 @@ +--- +title: 其它SVG内容 +slug: Web/SVG/Tutorial/Other_content_in_SVG +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Other_content_in_SVG +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p> + +<p>除了图形化原件，如矩形和圆形之外，SVG还提供了一些元素用来在图片中嵌入别的类型的内容。</p> + +<h3 id="嵌入光栅图像">嵌入光栅图像</h3> + +<p>很像在HTML中的<code>img</code>元素，SVG有一个<code>image</code>元素，用于同样的目的。你可以利用它嵌入任意光栅（以及矢量）图像。它的规格要求应用至少支持PNG、JPG和SVG格式文件。</p> + +<p>嵌入的图像变成一个普通的SVG元素。这意味着，你可以在其内容上用剪切、遮罩、滤镜、旋转以及其它SVG工具：</p> + +<pre class="brush: html"><svg version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="200" height="200"> + <image x="90" y="-65" width="128" height="146" transform="rotate(45)" + xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> +</svg></pre> + +<div class="hidden"> +<h2 id="Embedding_raster_images">Embedding_raster_images</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><svg version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="200" height="200"> + <image x="90" y="-65" width="128" height="146" transform="rotate(45)" + xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> +</svg> +</pre> +</div> + +<p>{{ EmbedLiveSample('Embedding_raster_images','220','220','/files/16567/rotate-image-demo.png') }}</p> + +<h3 id="嵌入任意XML">嵌入任意XML</h3> + +<p>因为SVG是一个XML应用，所以你<strong>总是</strong>可以在SVG文档的任何位置嵌入任意XML。但是你没有必要定义周围的SVG需要怎样反作用于这个内容。实际上，在一个遵从的浏览者中，根本没有反作用的方法，数据将简单被忽略。因此特地在SVG中添加了{{ SVGElement("foreignObject") }} 元素。它的唯一的目的是作为其它标记的容器和SVG样式属性的载体（更突出的<code>width</code>和<code>height</code>用来定义该对象占用的空间。）。</p> + +<p>foreignObject元素是一个好办法，用来在SVG中嵌入XHTML。如果你有更长的文本，该HTML布局比SVG <code>text</code>元素更适合。另一个经常被引用的用例是用MathML写的方程式。对于SVG的科学应用，它是连接两个世界的一个很好的办法。</p> + +<div class="note">注意：请记住，<code>foreignObject</code>元素的内容是能被浏览器加工的。一个独立的SVG浏览器不太可能呈现HTML或MathML。</div> + +<p>因为<code>foreignObject</code>是一个SVG元素，所以你可以像用图像那样，使用任何SVG的精华，它将被应用到它的内容。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/paths/index.html b/files/zh-cn/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..94cbf89821 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/paths/index.html @@ -0,0 +1,214 @@ +--- +title: 路径 +slug: Web/SVG/Tutorial/Paths +translation_of: Web/SVG/Tutorial/Paths +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> + +<p>如上一章所说，<a href="/zh-CN/docs/Web/SVG/Element/path" title="zh-CN/SVG/Element/path"><code><path></code></a>元素是SVG<a href="/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes">基本形状</a>中最强大的一个。 你可以用它创建线条, 曲线, 弧形等等。</p> + +<p>另外，path只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然<code>polyline</code>元素也能实现类似的效果，但是必须设置大量的点（点越密集，越接近连续，看起来越平滑流畅），并且这种做法不能够放大（放大后，点的离散更明显）。所以在绘制SVG时，对路径的良好理解很重要。虽然不建议使用XML编辑器或文本编辑器创建复杂的路径，但了解它们的工作方式将有助于识别和修复SVG中的显示问题。</p> + +<p><a href="/ㄣ/SVG/Tutorial/Basic_Shapes" title="ㄣ/SVG/Tutorial/Basic Shapes">上一章</a>提到过，path元素的形状是通过属性<code>{{ SVGAttr("d") }}</code>定义的，属性<code>d</code>的值是一个“命令+参数”的序列，我们将讲解这些可用的命令，并且展示一些示例。</p> + +<p>每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。比如移动到(10,10)这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种是用<strong>大写字母</strong>，表示采用绝对定位。另一种是用<strong>小写字母</strong>，表示采用相对定位（例如：<em>从上一个点开始，向上移动10px，向左移动7px</em>）。</p> + +<p><code>因为属性d</code>采用的是用户坐标系统，所以<strong>不需标明单位</strong>。在后面的教程中，我们会学到如何让变换路径，以满足更多需求。</p> + +<h2 id="Line_commands" name="Line_commands">直线命令</h2> + +<p><code><path></code>元素里有5个画直线的命令，顾名思义，直线命令就是在两个点之间画直线。首先是“Move to”命令，M，前面已经提到过，它需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。假设，你的画笔当前位于一个点，在使用M命令移动画笔后，只会移动画笔，但不会在两点之间画线。因为M命令仅仅是移动画笔，但不画线。所以M命令经常出现在路径的开始处，用来指明从何处开始画。</p> + +<pre class="notranslate">M x y +</pre> + +<p>或</p> + +<pre class="notranslate">m dx dy</pre> + +<p>这有一个比较好的例子，不过我们没画任何东西，只是将画笔移动到路径的起点，所以我们不会看到任何图案。但是，我把我们移动到的点标注出来了，所以在下面的例子里会看到(10,10)坐标上有一个点。注意，如果只画path，这里什么都不会显示。（这段不太好理解，说明一下：为了更好地展示路径，下面的所有例子里，在用path绘制路径的同时，也会用circle标注路径上的点。）<img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> + +<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10"/> + + <!-- Points --> + <circle cx="10" cy="10" r="2" fill="red"/> + +</svg></pre> + +<p>能够真正画出线的命令有三个（M命令是移动画笔位置，但是不画线），最常用的是“Line to”命令，<code>L</code>，<code>L</code>需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。</p> + +<pre class="eval notranslate"> L x y (or l dx dy) +</pre> + +<p>另外还有两个简写命令，用来绘制水平线和垂直线。<code>H</code>，绘制水平线。<code>V</code>，绘制垂直线。这两个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动。</p> + +<pre class="eval notranslate"> H x (or h dx) + V y (or v dy) +</pre> + +<p>现在我们已经掌握了一些命令，可以开始画一些东西了。先从简单的地方开始，画一个简单的矩形（同样的效果用<code><rect/></code>元素可以更简单的实现），矩形是由水平线和垂直线组成的，所以这个例子可以很好地展现前面讲的画线的方法。<img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> + +<svg width="100px" height="100px" version="1.1" 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>最后，我们可以通过一个“闭合路径命令”Z来简化上面的path，<code>Z</code>命令会从当前点画一条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后。另外，Z命令不用区分大小写。</p> + +<pre class="eval notranslate"> Z (or z) +</pre> + +<p>所以上面例子里用到的路径，可以简化成这样：</p> + +<pre class="eval notranslate"> <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> +</pre> + +<p>你也可以使用这些命令的相对坐标形式来绘制相同的图形，如之前所述，相对命令使用的是小写字母，它们的参数不是指定一个明确的坐标，而是表示相对于它前面的点需要移动多少距离。例如前面的示例，画的是一个80*80的正方形，用相对命令可以这样描述：</p> + +<pre class="eval notranslate"> <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> +</pre> + +<p>上述路径是：画笔移动到(10,10)点，由此开始，向右移动80像素构成一条水平线，然后向下移动80像素，然后向左移动80像素，然后再回到起点。</p> + +<p>你可能会问这些命令有什么用，因为 <code><polygon></code> 和 <code><polyline></code> 可以做到画出一样的图形。答案是，这些命令可以做得更多。如果你只是画直线，那么其他元素可能会更好用，但是，path却是众多开发者在SVG绘制中经常用到的。据我所知，它们之间不存在性能上的优劣。但是通过脚本生成path可能有所不同，因为另外两种方法只需要指明点，而path在这方面的语法会更复杂一些。</p> + +<h2 id="Curve_commands" name="Curve_commands">曲线命令</h2> + +<p>绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分。如果你在Inkscape、Illustrator或者Photoshop中用过路径工具，可能对贝塞尔曲线有一定程度的了解。欲了解贝塞尔曲线的完整数学讲解，请阅读这份<a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia的文档</a>。在这里不用讲得太多。贝塞尔曲线的类型有很多，但是在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。</p> + +<h3 id="Bezier_Curves" name="Bezier_Curves">贝塞尔曲线</h3> + +<p>我们从稍微复杂一点的三次贝塞尔曲线C入手，三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：</p> + +<pre class="eval notranslate"> C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) +</pre> + +<p>这里的最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。如果你熟悉代数或者微积分的话，会更容易理解控制点，控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。（文字描述不好，维基百科上有图示，更直观。） <img alt="" class="internal" src="/@api/deki/files/159/=Cubic_Bezier_Curves.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> + +<svg width="190px" height="160px" version="1.1" 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>上面的例子里，创建了9个三次贝塞尔曲线。有一点比较遗憾，标记控制点的代码会比较庞大，所以在这里舍弃了。（之前所有点都用circle标记，此处一样，只不过没把代码列出来）。如果你想更准确地控制它们，可以自己动手把他们画出来。图例上的曲线从左往右看，控制点在水平方向上逐渐分开，图例上的曲线从上往下看，控制点和曲线坐标之间离得越来越远。这里要注意观察，曲线沿着起点到第一控制点的方向伸出，逐渐弯曲，然后沿着第二控制点到终点的方向结束。</p> + +<p>你可以将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。通常情况下，一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变）。这样，你可以使用一个简写的贝塞尔曲线命令S，如下所示：</p> + +<pre class="eval notranslate"> S x2 y2, x y (or s dx2 dy2, dx dy) +</pre> + +<p>S命令可以用来创建与前面一样的贝塞尔曲线，但是，如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点。下面是S命令的语法示例，图中左侧红色标记的点对应的控制点即为蓝色标记点。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/363/=ShortCut_Cubic_Bezier.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> +<svg width="190px" height="160px" version="1.1" 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>另一种可用的贝塞尔曲线是二次贝塞尔曲线Q，它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。</p> + +<pre class="eval notranslate"> Q x1 y1, x y (or q dx1 dy1, dx dy) +</pre> + +<p><img alt="" class="internal" src="/@api/deki/files/326/=Quadratic_Bezier.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> +<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>就像三次贝塞尔曲线有一个S命令，二次贝塞尔曲线有一个差不多的T命令，可以通过更简短的参数，延长二次贝塞尔曲线。</p> + +<pre class="eval notranslate"> T x y (or t dx dy) +</pre> + +<p>和之前一样，快捷命令T会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。需要注意的是，T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/364/=Shortcut_Quadratic_Bezier.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> +<svg width="190px" height="160px" version="1.1" 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>虽然三次贝塞尔曲线拥有更大的自由度，但是两种曲线能达到的效果总是差不多的。具体使用哪种曲线，通常取决于需求，以及对曲线对称性的依赖程度。</p> + +<h3 id="Arcs" name="Arcs">弧形</h3> + +<p>弧形命令A是另一个创建SVG曲线的命令。基本上，弧形可以视为圆形或椭圆形的一部分。假设，已知椭圆形的长轴半径和短轴半径，并且已知两个点（在椭圆上），根据半径和两点，可以画出两个椭圆，在每个椭圆上根据两点都可以画出两种弧形。所以，仅仅根据半径和两点，可以画出四种弧形。为了保证创建的弧形唯一，A命令需要用到比较多的参数：</p> + +<pre class="eval notranslate"> 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>弧形命令A的前两个参数分别是x轴半径和y轴半径，它们的作用很明显，不用多做解释，如果你不是很清楚它们的作用，可以参考一下椭圆<a href="/zh-CN/docs/Web/SVG/Element/ellipse" title="zh-CN/SVG/Element/ellipse">ellipse</a>命令中的相同参数。弧形命令A的第三个参数表示弧形的旋转情况，下面的例子可以很好地解释它：</p> + +<p><img alt="" class="internal" src="/@api/deki/files/346/=SVGArcs_XAxisRotation.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> +<svg width="320px" height="320px" version="1.1" 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>如图例所示，画布上有一条对角线，中间有两个椭圆弧被对角线切开(x radius = 30, y radius = 50)。第一个椭圆弧的x-axis-rotation（x轴旋转角度）是0，所以弧形所在的椭圆是正置的（没有倾斜）。在第二个椭圆弧中，x-axis-rotation设置为-45，所以这是一个旋转了45度的椭圆，并以短轴为分割线，形成了两个对称的弧形。参看图示中的第二个椭圆形。</p> + +<p>对于上图没有旋转的椭圆，只有2种弧形可以选择，不是4种，因为两点连线（也就是对角线）正好穿过了椭圆的中心。像下面这张图，就是普通的情况，可以画出两个椭圆，四种弧。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png" style="height: 320px; width: 320px;"></p> + +<p>上面提到的四种不同路径将由接下来的两个参数决定。如前所讲，还有两种可能的椭圆用来形成路径，它们给出的四种可能的路径中，有两种不同的路径。这里要讲的参数是large-arc-flag（角度大小） 和sweep-flag（弧线方向），large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。下面的例子展示了这四种情况。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> +<svg width="325px" height="325px" version="1.1" 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>你应该已经猜到了，最后两个参数是指定弧形的终点，弧形可以简单地创建圆形或椭圆形图标，比如你可以创建若干片弧形，组成一个<em>饼图</em>。</p> + +<p>如果你是从<a href="/zh-CN/HTML/Canvas" title="zh-CN/HTML/Canvas">Canvas</a>过渡到SVG，那么弧形会比较难以掌握，但它也是非常强大的。用路径来绘制完整的圆或者椭圆是比较困难的，因为圆上的任意点都可以是起点同时也是终点，无数种方案可以选择，真正的路径无法定义。通过绘制连续的路径段落，也可以达到近似的效果，但使用真正的circle或者ellipse元素会更容易一些。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/patterns/index.html b/files/zh-cn/web/svg/tutorial/patterns/index.html new file mode 100644 index 0000000000..bd58a30004 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/patterns/index.html @@ -0,0 +1,73 @@ +--- +title: Patterns +slug: Web/SVG/Tutorial/Patterns +tags: + - SVG +translation_of: Web/SVG/Tutorial/Patterns +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p> + +<h2 id="图案">图案</h2> + +<p>在我看来patterns（图案）是SVG中用到的最让人混淆的填充类型之一。它的功能非常强大，所以我认为他们值得讨论一下并且我们应至少对他们有最基本的了解。跟渐变一样，{{SVGElement('pattern')}}需要放在SVG文档的<defs>内部。</p> + +<pre class="brush: html"><?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="0" y="0" 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>{{ EmbedLiveSample('Patterns','220','220','/files/725/SVG_Pattern_Example.png') }}</p> + +<p>在pattern元素内部你可以包含任何之前包含过的其它基本形状，并且每个形状都可以使用之前学习过的任何样式样式化，包括渐变和半透明。这里我们在pattern中绘制两个矩形（两个矩形互相重叠，一个矩形是另一个矩形大小的二倍，且用于填充整个pattern）和一个圆。</p> + +<p>关于pattern容易混淆的事是，pattern定义了一个单元系统以及他们的大小。上例中，我们在pattern元素上定义了<code>width</code>和<code>height</code>属性，用于描述在重复下一个图案之前应该跨过多远。如果你想要在绘制时偏移矩形的开始点，也可以使用x和y属性，原因如下。</p> + +<p>就像前面使用了<code>gradientUnits</code>属性，同样的<code>pattern</code>也有一个属性<code>patternUnits</code>用于描述我们使用的属性单元。这同之前使用的<code>objectBoundingBox</code>默认值一样，所以当一个值为 1 时，它被缩放到应用 pattern 对象的宽高值。因此，我们希望 pattern 垂直和水平的重复4次，所以宽高被设置位0.25，这一位置 pattern 的宽高仅为总外框大小的 0.25。</p> + +<p>与渐变不同，pattern有第二个属性<code>patternContentUnits</code>，它描述了<code>pattern</code>元素基于基本形状使用的单元系统，这个属性默认值为<code>userSpaceOnUse</code>，与<code>patternUnits</code>属性相反，这意味着除非你至少指定其中一个属性值（<code>patternContentUnits</code>或<code>patternUnits</code>），否则在<code>pattern</code>中绘制的形状将与<code>pattern</code>元素使用的坐标系不同，当你手写这部分时会容易混淆。为了使上例生效，我们必须考虑我们的边框（200像素）大小和我们实际希望<code>pattern</code>垂直和水平重复 4 次的需求。这意味着每个 pattern 单元应该是 <code>50x50 </code>的方形，pattern 中的两个矩形和圆形的大小会被缩放适应到一个 50x50 的边框里，任何我们绘制在边框外的内容都不会显示。因为我们希望 pattern 从边框的左上角里开始，所以 pattern 也必须偏移 10 像素，也就是 pattern 的 <code>x</code> 和 <code>y</code> 属性需要调整为 <code>10/200=0.05</code>。</p> + +<p>如果对象改变了大小，pattern会自适应其大小，但是对象里面的内容不会自适应。所以当我们在 pattern 中还是放置 4 个重复的 pattern 时，组成 pattern 的对象将不会保持相同的大小，同时在他们之间会有大片空白区域。通过改变<code>patternContentUnits</code>属性，我们可以把所有的元素放到相同的单元系统中：</p> + +<pre class="brush: xml"> <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内部的对象数目和重复不变。这与 <code>userSpaceOnUse </code>系统不同，userSpaceOnUse 系统中如果对象改变大小，pattern本身会保持不变，只是重复更多次去填满边框。</p> + +<p>它有一点点的副作用，在Gecko中的圆如果半径设置得小于0.075（尽管半径应该设置的比这个值大得多。这个可能是pattern元素中的一个bug，或者也不算bug，我也不太清楚）的话绘制的时候可能会出现问题，为了规避这个问题，可能最好的办法是尽量避免在<code>objectBoundingBox</code>单元中绘制图形。</p> + +<p>在你想要使用pattern的时候，可能你并不中意这些方法中的任何一个，Pattern通常都是有确认的大小并且重复他们自己，与对象形状独立开来。要想创建这种pattern，pattern和它的内容必须在当前用户空间中绘制，这样当对象在做如下操作时他们才不会改变形状：</p> + +<pre class="brush: xml"> <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"></p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/positions/index.html b/files/zh-cn/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..294fe65838 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/positions/index.html @@ -0,0 +1,48 @@ +--- +title: 坐标定位 +slug: Web/SVG/Tutorial/Positions +translation_of: Web/SVG/Tutorial/Positions +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p> + +<h2 id="The_grid" name="The_grid">网格</h2> + +<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;"> 对于所有元素，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/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/svg_fonts/index.html b/files/zh-cn/web/svg/tutorial/svg_fonts/index.html new file mode 100644 index 0000000000..0ff198dcff --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/svg_fonts/index.html @@ -0,0 +1,94 @@ +--- +title: SVG 字体 +slug: Web/SVG/Tutorial/SVG_fonts +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> + +<p>当规定SVG时，在浏览器支持web字体并不流行。因为访问正确的字体文件对于正确呈现字体是有确定性的，SVG中添加了一个字体描述技术，以提供这个能力。它并不是为了和别的格式比如说PostScript或OTF兼容，而是为了将字形信息嵌入SVG呈现的一个简单的方法。</p> + +<div class="note"><strong>SVG字体当前只在Safari和Android浏览器中受支持。</strong><br> +Internet Explorer<a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">还没有考虑实现它</a>，Chrome 38（和Opera25）<a href="https://www.chromestatus.com/feature/5930075908210688">移除了这个功能</a>，Firefox已经<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">无限期推迟实施它</a>以专心实现<a href="/en/WOFF">WOFF</a>。别的工具比如说<a href="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>插件、Batik和部分Inkscape支持SVG字体嵌入。</div> + +<p>定义一个SVG字体的基础是{{ SVGElement("font") }}元素。</p> + +<h2 id="定义一个字体">定义一个字体</h2> + +<p>在SVG中嵌入一个字体，有一些原料要求。让我们用一个示例演示它（来自<a href="http://www.w3.org/TR/SVG/fonts.html#FontElement">规范文档</a>的示例），并详细解释。</p> + +<pre><font id="Font1" horiz-adv-x="1000"> + <font-face font-family="Super Sans" font-weight="bold" font-style="normal" + units-per-em="1000" cap-height="600" x-height="400" + ascent="700" descent="300" + alphabetic="0" mathematical="350" ideographic="400" hanging="500"> + <font-face-src> + <font-face-name name="Super Sans Bold"/> + </font-face-src> + </font-face> + <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> + <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph> + <glyph unicode="@"><!-- Outline of @ glyph --></glyph> + <!-- more glyphs --> +</font> +</pre> + +<p>我们从{{ SVGElement("font") }}元素开始。这个携带了一个ID属性，使它能够通过一个<code>URI</code>被引用（如下所示）。属性<code>horiz-adv-x</code>定义了相比之单一字形的路径定义，一个字符的平均宽度。值<code>1000</code>设置了一个起作用的合理值。有一些陪同的属性，帮助进一步定义基本的字形盒布局。</p> + +<p>{{ SVGElement("font-face") }}元素在SVG中等同于CSS的 <a href="/en/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a> 声明。它定义了最终字体的基本属性，比如说weight、style，等等。在上面这个示例中，最重要的是定义<code>font-family</code>，后面的CSS和SVG <code>font-family</code>属性可以引用它的值。属性<code>font-weight</code>和<code>font-style</code>跟CSS中的描述符有同样的目的。所有后面的属性都是字体布局引擎的呈现指令，举个例子，字形的全部高度可以<a href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">提升</a>多少。</p> + +<p>它的子元素，{{ SVGElement("font-face-src") }}元素，相对于CSS的<code>@font-face</code>描述符中的<code>src</code>描述符。你可以利用它的子元素 {{ SVGElement("font-face-name") }}和{{ SVGElement("font-face-uri") }}把字体声明指向外源。以上示例表达了如果渲染器有一个名为“Super Sans Bold”的本地字体可用，它将使用这个本地字体。</p> + +<p>紧跟着{{ SVGElement("font-face-src") }}元素的是一个{{ SVGElement("missing-glyph") }}元素。它定义了如果一个特定的字形在字体中找不到，而且也没有回调机制的话，该如何显示。它同时还显示了如何创建字形：在里面简单添加任一个图形化SVG内容。你可以在这里使用任何其它的SVG元素，甚至是 {{ SVGElement("filter") }}元素、{{ SVGElement("a") }}元素或者 {{ SVGElement("script") }}元素。然而，为了简化字形，你可以简单添加一个属性<code>d</code>——它精确定义了字形的形状，就像标准SVG路径所做的那样。</p> + +<p>真正的字形是用{{ SVGElement("glyph") }}元素定义的。它最重要的属性是<code>unicode</code>。它定义了表达这个字形的unicode代码点。如果你还在一个字形上指定了{{htmlattrxref("lang")}}属性，你可以更进一步专门限定它为特定的语言（由目标上的<code>xml:lang</code>属性表达）。而且，你可以使用任意的SVG来定义这个字形，它允许用户代理所支持的很多效果。</p> + +<p>有两个进一步的元素，可以定义在<code>font</code>元素里面：{{ SVGElement("hkern") }}元素和{{ SVGElement("vkern") }}元素。这两个元素每个引用到至少两个字符（属性u1和属性u2）以及一个属性k。属性k决定了那些字符之间的距离应该减少多少。下面的示例指示用户代理把“A”和“V”字符放得比标准的字符间距更靠近一些。</p> + +<pre><hkern u1="A" u2="V" k="20" /> +</pre> + +<h2 id="引用一个字体">引用一个字体</h2> + +<p>如果你已经把你的字体声明如上放在一起，你可以使用一个单一的<code>font-family</code>属性以实现在SVG文本上应用字体：</p> + +<pre><font> + <font-face font-family="Super Sans" /> + <!-- and so on --> +</font> + +<text font-family="Super Sans">My text uses Super Sans</text> +</pre> + +<p>然而，你可以自由组合一些方法，在如何定义字体方面有极大的自由度。</p> + +<h3 id="选项：使用CSS_font-face">选项：使用CSS @font-face</h3> + +<p>你可以使用<code>@font-face</code>以引用远程（或者非远程）字体：</p> + +<pre><font id="Super_Sans"> + <!-- and so on --> +</font> + +<style type="text/css"> +@font-face { + font-family: "Super Sans"; + src: url(#Super_Sans); +} +</style> + +<text font-family="Super Sans">My text uses Super Sans</text></pre> + +<h3 id="选项：引用一个远程字体">选项：引用一个远程字体</h3> + +<p>上面提到的font-face-uri元素允许你引用一个外来字体，因此可以有很大的可重用性：</p> + +<pre><font> + <font-face font-family="Super Sans"> + <font-face-src> + <font-face-uri xlink:href="fonts.svg#Super_Sans" /> + </font-face-src> + </font-face> +</font> +</pre> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/svg_image_tag/index.html b/files/zh-cn/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..4b01b91f24 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,32 @@ +--- +title: SVG image element +slug: Web/SVG/Tutorial/SVG_Image_Tag +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> + +<p>SVG的{{ SVGElement("image") }}元素允许在一个SVG对象内部呈现光栅图像。</p> + +<p>在这个基本示例中，一个{{ SVGAttr("xlink:href") }} 属性引用了一个将呈现在SVG对象中的.jpg图像：</p> + +<pre class="brush: xml"><?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg width="5cm" height="4cm" version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> + <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> +</svg></pre> + +<p>这里有一些重要的事情需要注意（引用自<a href="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3规范文档</a>）：</p> + +<ul> + <li> + <p>如果你没有设置x属性或y属性，它们自动被设置为0。</p> + </li> + <li> + <p>如果你没有设置height属性或width属性，它们自动被设置为0。</p> + </li> + <li>如果width属性或height等于0，将不会呈现这个图像。</li> +</ul> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html b/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..a29b85a1da --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,95 @@ +--- +title: SVG In HTML Introduction +slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction +tags: + - SVG +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +<h2 id="Overview" name="Overview">概述</h2> + +<p>本文及其相关示例展示了如何使用内联的 <a href="/zh-CN/docs/SVG" title="SVG">SVG</a> 给一个表单提供背景图片，它展示了如何按照编写常规XHTML代码相同的方式来通过<a href="/zh-CN/docs/JavaScript" title="JavaScript">JavaScript</a> 和 <a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 操作图片。注意，该示例仅在支持XHTML（非HTML）并集成了SVG的浏览器中正常工作。</p> + +<h2 id="Source" name="Source">源码</h2> + +<p>源码如下： <a class="external external-icon" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">查看示例</a></p> + +<pre><html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>XTech SVG Demo</title> +<style> + stop.begin { stop-color:yellow; } + stop.end { stop-color:green; } + body.invalid stop.end { stop-color:red; } + #err { display:none; } + body.invalid #err { display:inline; } +</style> +<script> + function signalError() { + document.getElementById('body').setAttribute("class", "invalid"); + } +</script> +</head> +<body id="body" + style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> +<form> + <fieldset> + <legend>HTML Form</legend> + <p><label>Enter something:</label> + <input type="text"/> + <span id="err">Incorrect value!</span></p> + <p><input type="button" value="Activate!" onclick="signalError();" /></p> + </fieldset> +</form> + +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" + style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> + <linearGradient id="gradient"> + <stop class="begin" offset="0%"/> + <stop class="end" offset="100%"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> + <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> +</svg> +</body> +</html> +</pre> + +<h2 id="Discussion" name="Discussion">讨论</h2> + +<p>该页面主要是常规的XHTML、CSS和Javascript，唯一有趣的部分就是包含了<svg>元素。该元素及其子元素都被声明在SVG的命名空间内。它包含一个渐变和两个渐变填充的形状。该渐变颜色的终值颜色由CSS设置，当用户在表单中输入了错误信息，脚本会给<body>设置一个<code>invalid</code>属性，样式规则将渐变颜色的<code>end-stop</code>颜色设置为红色（另一个样式规则用于展示错误提示信息）</p> + +<p>该方法有如下几点需要注意：</p> + +<ul> + <li>我们单独举出了一个可能存在的网站构成部分——表单，并为其添加了吸引人的、交互性的背景</li> + <li>该方法通过不展示背景图片的方式，向后兼容了不支持SVG的浏览器</li> + <li>它非常简单且运行良好</li> + <li>这个图片能够智能的自动适应其需要的大小</li> + <li>我们可以给HTML和SVG都显式声明样式规则</li> + <li>相同的脚本同时操作了HTML和SVG</li> + <li>该文档完全符合标准</li> +</ul> + +<div class="note"> +<p>如果需要给一个内嵌的SVG元素通过DOM方法添加一个有外链的图片，我们需要使用 <code>setAttributeNS</code> 来设置外链地址 <code>href</code>. 示例如下:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElementNS</span><span class="punctuation token">(</span><span class="string token">"http://www.w3.org/2000/svg"</span><span class="punctuation token">,</span> <span class="string token">"image"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +img<span class="punctuation token">.</span><span class="function token">setAttributeNS</span><span class="punctuation token">(</span><span class="string token">"http://www.w3.org/1999/xlink"</span><span class="punctuation token">,</span> <span class="string token">"xlink:href"</span><span class="punctuation token">,</span> <span class="string token">"move.png"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code> +</pre> +</div> + +<h2 id="Details" name="Details">细节</h2> + +<p>viewBox属性创建了一个与SVG图片坐标系相关联的逻辑坐标系，通过这种方式我们的图片被放置到了一个100x100的视觉系中。</p> + +<p><code>preserveAspectRatio属性指定了需要预设的数据，即指定了再有效大小内图片的居中、适配图片最大宽高，并裁切掉了多余部分。</code></p> + +<p>样式属性指定了SVG在form背景中的位置。</p> + +<h2 id="Related_Links" name="Related_Links">相关链接</h2> + +<ul> + <li>Another SVG in XHTML example: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li> + <li><a href="http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml">Working example</a> 可以同时工作在安装有Adobe SVG Viwer的Mozilla和IE浏览器中。 （对于同时工作在Firefox和IE浏览器中得内联SVG，需要为每个浏览器的服务文档设置不同的Cotent-type。因为当你基于一个代理服务器获取页面的时候，如果在第二个浏览器中加载该案例将会失败，因其会获取错误的Content-Type）</li> +</ul> diff --git a/files/zh-cn/web/svg/tutorial/texts/index.html b/files/zh-cn/web/svg/tutorial/texts/index.html new file mode 100644 index 0000000000..6380942179 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/texts/index.html @@ -0,0 +1,74 @@ +--- +title: Texts +slug: Web/SVG/Tutorial/Texts +translation_of: Web/SVG/Tutorial/Texts +--- +<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div> + +<p>在SVG中有两种截然不同的文本模式. 一种是写在图像中的文本，另一种是SVG字体。关于后者我们将在教程的后面进行讲解，现在我们主要集中前者：写在图像中的文本。</p> + +<h2 id="基础">基础</h2> + +<p>我们已经在之前<a href="/zn-CN/docs/Web/SVG/Tutorial/Getting_Started">入门示例</a>中看到了，在一个SVG文档中，<text>元素内部可以放任何的文字。</p> + +<pre class="brush:xml notranslate"><text x="10" y="10">Hello World!</text> +</pre> + +<p>属性x和属性y性决定了文本在视口中显示的位置。属性<code>text-anchor</code>，可以有这些值：start、middle、end或inherit，允许决定从这一点开始的文本流的方向。</p> + +<p>和形状元素类似，属性<code>fill</code>可以给文本填充颜色，属性<code>stroke</code>可以给文本描边，形状元素和文本元素都可以引用渐变或图案, 相比较CSS2.1只能绘制简单的彩色文字，SVG显得更具有优势。</p> + +<h2 id="设置字体属性">设置字体属性</h2> + +<p>文本的一个至关重要的部分是它显示的字体。SVG提供了一些属性，类似于它们的CSS同行，用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明：<code>font-family</code>、<code>font-style</code>、<code>font-weight</code>、<code>font-variant</code>、<code>font-stretch</code>、<code>font-size</code>、<code>font-size-adjust</code>、<code>kerning</code>、<code>letter-spacing</code>、<code>word-spacing</code>和<code>text-decoration</code>。</p> + +<h2 id="其它文本相关的元素">其它文本相关的元素</h2> + +<h3 id="tspan">tspan</h3> + +<p>该元素用来标记大块文本的子部分，它必须是一个<code>text</code>元素或别的<code>tspan</code>元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色。</p> + +<pre class="brush:xml notranslate"><text> + <tspan font-weight="bold" fill="red">This is bold and red</tspan> +</text> +</pre> + +<p><code>tspan</code>元素有以下的自定义属性：</p> + +<p><strong>x</strong><br> + 为容器设置一个新绝对<code>x</code>坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列，它们将一个一个地应用到<code>tspan</code>元素内的每一个字符上。</p> + +<p><strong>dx</strong><br> + 从当前位置，用一个水平偏移开始绘制文本。这里，你可以提供一个值数列，可以应用到连续的字体，因此每次累积一个偏移。</p> + +<p>此外还有属性<strong>y</strong>和属性<strong>dy</strong>作垂直转换。</p> + +<p><strong>rotate</strong><br> + 把所有的字符旋转一个角度。如果是一个数列，则使每个字符旋转分别旋转到那个值，剩下的字符根据最后一个值旋转。</p> + +<p><strong>textLength</strong><br> + 这是一个很模糊的属性，给出字符串的计算长度。它意味着如果它自己的度量文字和长度不满足这个提供的值，则允许渲染引擎精细调整字型的位置。</p> + +<h4 id="tref">tref</h4> + +<p><code>tref</code>元素允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用<code>xlink:href</code>属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。</p> + +<pre class="brush:xml notranslate"><text id="example">This is an example text.</text> + +<text> + <tref xlink:href="#example" /> +</text> +</pre> + +<h4 id="textPath">textPath</h4> + +<p>该元素利用它的<code>xlink:href</code>属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走：</p> + +<pre class="brush:xml notranslate"><path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" /> +<text> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> + This text follows a curve. + </textPath> +</text></pre> + +<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div> diff --git a/files/zh-cn/web/svg/tutorial/tools_for_svg/index.html b/files/zh-cn/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..9127b6fad3 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,64 @@ +--- +title: SVG工具 +slug: Web/SVG/Tutorial/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p> + +<p>现在我们已经讲解了SVG内部的基础。我们将看一看哪些工具可以制作或呈现SVG文件。</p> + +<h3 id="浏览器支持">浏览器支持</h3> + +<p>随着IE9面世，最终所有的主流浏览器将支持SVG：Internet Explorer 9、Mozilla Firefox、Safari、Google Chrome和Opera。基于Webkit的移动设备浏览器（主要是指iOS和Android），都支持SVG。在较老或者较小的设备上，一般支持SVG Tiny。</p> + +<h2 id="Inkscape">Inkscape</h2> + +<p>URL: <a class="external" href="http://www.inkscape.org" title="http://www.inkscape.org/">www.inkscape.org</a></p> + +<p>图形格式最重要的工具之一，是一个相当好的绘图程序。Inkscape提供了最先进的矢量绘图功能，而且它是开源的。</p> + +<p>此外它使用SVG作为它的原生文件格式。为了存储Inkcape特有的数据，它扩展了SVG文件，添加了自定义命名空间的元素和属性，但是你依然可以选择导出纯SVG文件。</p> + +<h2 id="Adobe_Illustrator">Adobe Illustrator</h2> + +<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p> + +<p>在Adobe收购Macromedia之前，它已经是最著名的SVG的推动者。长期以来，Illustrator对SVG支持得很好。然而，它输出的SVG经常显出一些怪癖，导致有必要为普适性而进行后续处理。</p> + +<h2 id="Apache_Batik">Apache Batik</h2> + +<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p> + +<p>Batik是Apache软件基金会支持下的一个开源工具集。这个工具包是用Java写的，提供了相当完整的SVG 1.1支持，而且还有很多源自于SVG 1.2计划的功能。</p> + +<p>除了查看器（Squiggle）以及输出为PNG的光栅化输出，Batik还提供了一个SVG完美打印机以格式化SVG文件，以及一个TrueType字体到SVG字体的转换器。</p> + +<p>与<a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a>联用，Batki还可以把SVG转换成PDF。</p> + +<h3 id="其它呈现器">其它呈现器</h3> + +<p>要想从一个SVG源创建一个光栅图像，存在很多个项目。<a class="external" href="http://ImageMagick.org" title="http://imagemagick.org/">ImageMagick</a>是最著名的命名行图象处理工具之一。Wikipedia所用到的Gnome库<a class="external" href="http://library.gnome.org/devel/rsvg/" title="http://library.gnome.org/devel/rsvg/">rsvg</a>能把它们的SVG图形光栅化。</p> + +<h2 id="Raphael_JS">Raphael JS</h2> + +<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p> + +<p>这是一个JavaScript库，表现为浏览器编译器之间的一个抽像层。特别老的Internet Explorer版本可以用生成的VML支持。VML，一种矢量标记语言，它是SVG的两个祖先之一，从IE 5.5以来就存在了。</p> + +<h2 id="Google_Docs">Google Docs</h2> + +<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p> + +<p>从Google Docs绘制，可以被输出为SVG。</p> + +<h2 id="Science">Science</h2> + +<p>这两个名声很响的策划工具xfig和gnuplot都支持导出为SVG。为了在web上呈现图像， <a href="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a>支持VML、SVG和canvas，基于浏览器的功能，自动决定使用哪种技术。</p> + +<p>在GIS（地理图形信息系统）应用中，SVG是常用的存储和呈现格式。请阅读<a class="external" href="http://carto.net">carto.net</a>以了解详情。</p> + +<h2 id="更多工具">更多工具</h2> + +<p>W3C提供了一个支持SVG的<a href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">程序列表</a>。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p> |