wap 第六章 svg 路径

文章内容来源于http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Paths#Notational_Shortcuts_for_a_Path

第3章中描述的所有基本形状是真正简写形式为更普遍的<PATH>的元素。你是很好的建议，使用这些快捷键，它们有助于使你的SVG更具可读性和更有条理。的<PATH>元素较为一般，它勾勒了一系列连接线，圆弧和曲线通过指定任意形状。此轮廓，填充和绘制与中风，正如基本形状。此外，这些路径（以及作为速记的基本形状）可以被用来定义剪切区域的轮廓或透明遮罩，因为你会看到在第9章中。

描述一个轮廓的所有的数据是在Ð <路径>元素的属性（Ð代表数据）。路径数据由单字母命令，如M为moveTo的或L 划线到，然后由该特定命令的坐标信息。

MOVETO , lineTo,closepath

每个路径都必须首先一个MOVETO命令。命令字母是一个资本其次是中号的x和y坐标，用逗号或空格分隔。此命令将当前位置设置的“笔”绘制的轮廓。

其次是由一个或多个划线到命令，记由资本为L，也跟着的x和y轴的坐标，并用逗号或空格分开。实施例6-1中，有三个路径。首先绘制单行线，第二绘制一个合适的角度，和第三绘制了两个30度角。“当你拿起”笔与另一MOVETO，你开始一个新的子路径。请注意，使用逗号和空格作为分隔符是不同的，但完全合法的，在所有三个路径。其结果是图6-1。

例6-1。使用MoveTo和LineTo

<g style="stroke: black; fill: none;"><!-- single line --><path d="M 10 10 L 100 10"/><!-- a right angle --><path d="M 10, 20  L 100, 20  L  100,50"/><!-- two thirty-degree angles --><path d="M 40 60, L 10 60, L 40 42.68,M 60 60, L 90 60, L 60 42.68"/>
</g>

注意

您可能已经注意到，路径数据看起来并不非常像XML属性的典型值。因为整个路径数据被包含在一个属性，而不是一个单独的元素的每个点或线段，路径时占用更少的内存读入文档对象模型结构的XML解析器。此外，路径的紧凑的书写方式允许一个复杂的图形而不需要大量带宽被发送。

如果你想使用一个<PATH>绘制一个矩形，你可以绘制所有四行，或者你可以借鉴的前三行，然后使用命令，closepath的资本Z表示，绘制一条直线回当前子点开始。例6-2 图6-2，这表明绘制一个矩形硬盘的方式，与closepath绘制一个矩形，并绘制两个三角形的路径，通过打开和关闭两个子路径的SVG 。

例6-2。使用closepath

<g style="stroke: black; fill: none;"><!-- rectangle; all four lines --><path d="M 10 10, L 40 10, L 40 30, L 10 30, L 10 10"/><!-- rectangle with closepath --><path d="M 60 10, L 90 10, L 90 30, L 60 30, Z"/><!-- two thirty-degree triangles --><path d="M 40 60, L 10 60, L 40 42.68, ZM 60 60, L 90 60, L 60 42.68, Z"/>
</g>

相对MOVETO和LINETO

上面的命令都是由大写字母表示，被假定为绝对坐标和坐标。如果您使用的小写命令字母，坐标解释为相对于当前笔位置。因此，下面的两个路径是等效的：

<path d="M 10 10 L 20 10 L 20 30  M 40 40 L 55 35"style="stroke: black;"/>
<path d="M 10 10 l 10  0 l  0 20  m 20 10 l 15 -5"style="stroke: black;"/>

如果你开始的路径小写米（MOVETO），它的坐标将被解释为一个绝对位置计算的相对位置，因为没有以前的笔的位置。本章中所有其他的命令也有同样的大写和小写的区别。一个大写的命令的坐标是绝对的，是相对一个小写的命令的坐标。的closepath命令，它没有坐标，具有相同的效果，在两个大写字母和小写。

路径快捷键

如果内容为王和设计是女王，然后带宽效率是皇家的宫殿保持平稳运行的朝臣。由于任何不平凡的绘图路径与许多几十坐标对，的<PATH>元素有快捷键，让您尽可能几个字节表示路径。

水平LineTo和垂直lineTo的命令

由于水平和垂直线条是如此普遍，路径可能指定一个Ĥ绝对x坐标或H命令的命令后跟相对x坐标的水平线。同样，一条垂直线，指定一个V命令绝对Ÿ坐标或v命令，然后由一个相对的y坐标。

因此，下面的路径中绘制一个矩形，宽15个单位和25个单位的高度，在坐标（12，24）的左上角。

<path d="M 12 24 h 15 v 25 h -15 z"/>

符号的快捷方式的路径

路径也可以被缩短，通过应用下面的两个规则：

您可以多套L 或升后的坐标，就像你做在<polyline>元素。以下六个路径都得出相同的钻石，在图6-3所示，前三个是在绝对坐标和相对坐标系中的最后三个。第三和第六的路径有一个有趣的转折-如果你把多对moveTo的坐标后，所有对后的第一个被假定在前面加一个lineTo的。[1]

<path d="M 30 30 L 55 5 L 80 30 L 55 55 Z"/> <path d="M 30 30 L 55 5 80 30 55 55 Z"/> <path d="M 30 30 55 5 80 30 55 55 Z"/> <path d="m 30 30 l 25 -25 l 25 25 l -25 25 z"/> <path d="m 30 30 l 25 -25 25 25 -25 25 z"/> <path d="m 30 30 25 -25 25 25 -25 25 z"/>

2.这是没有必要的任何空白可能被淘汰出局。你并不需要一个空白的命令信后，因为所有的命令都只有一个字母。您不需要命令字母之间的空白，一个数字和一个命令，因为不能部分号码。您不需要积极和消极的数量之间的一个空白时间的负数前导减号不能是一个正数的一部分。这让您进一步减少在前面上市的第三和第六的路径：

<path d="M30 30 55 5 80 30 55 55Z"/> <path d="m30 30 25-25 25 25-25 25z"/>

空白消除规则在行动的另一个例子是画了一个长方形的15个单位的高度，宽度和25个单位的左上角坐标（12，24）的例子所示：

<path d="M 12 24 h 15 v 25 h -15 z"/> <!-- original -->
<path d="M12 24h15v25h-15z"/> <!-- shorter -->

椭圆弧

线条简单;两个路径上的点唯一地确定它们之间的线段。由于无限数量的曲线可以得出两个点之间，则必须提供附加信息，以得出它们之间的弯曲路径。最简单的椭圆弧的曲线，我们将研究 - 即，绘制一个边的连接两点的椭圆形。

弧虽然在视觉上最简单的曲线，指定一个独特的弧线，最需要的信息。第一条信息，您需要指定X - Ÿ椭圆上的点位于半径。这缩小它归结为两种可能的省略号，你可以看到在图6-4（a）节。两点划分分为四个圆弧的两个椭圆。他们两个，（b）和（c）中，测量小于180度的圆弧。其他两个，（d）和（e）是大于180度。如果你看看（b）和（c）中，你会发现，他们的方向是有区别的（b）中绘制的方向，越来越多的负面的角度，和（c）在正角增加的方向。的关系成立之间（四）及（e）。

但等待-我们还没有唯一指定潜在弧！有没有法律规定，椭圆的X半径的x轴平行。图6-4示出的部分（f）的两个点与候选椭圆相对于x轴旋转30度。

因此，电弧命令开始与甲缩写为一个绝对坐标或相对坐标，其次是7个参数：

X - Ÿ半径的椭圆点在于。
的x轴旋转的椭圆。
大圆弧标志，这是零，如果电弧的措施是弧的措施是，如果大于或等于180度小于180度，或者一个。
sweep-flag的，这是零，如果电弧在负角度的方向，或者一个要被绘制，如果圆弧要被绘制在正角度方向。
期末X - Ÿ -结束点的坐标。（其出发点是由绘制的最后一个点或最后一个moveTo的命令）。

这里的路径是用于绘制椭圆弧部分（二）至（e）图6-4：

<path d="M 125,75 A100,50 0 0,0 225,125"/> <!-- b -->
<path d="M 125,75 A100,50 0 0,1 225,125"/> <!-- c -->
<path d="M 125,75 A100,50 0 1,0 225,125"/> <!-- d -->
<path d="M 125,75 A100,50 0 1,1 225,125"/> <!-- e -->

作为进一步的例子，让我们提升的背景下，我们开始在例4-8完成/阴阳符号，是韩国国旗的一部分。例6-3保持完整的椭圆作为<ellipse>元素，但创建半圆它需要的路径。其结果示于图6-5。

例6-3。使用椭圆弧

<!-- gray drop shadow -->
<ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"/><!-- light blue ellipse -->
<ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"/><!-- large light red semicircle fills upper half,followed by small light red semicircle that dips intolower left half of symbol -->
<path d="M 302 152 A 150 120, 0, 1, 0, 2 152A 75 60, 0, 1, 0, 152 152" style="fill: #ffcccc;"/><!-- light blue semicircle rises into upper right half of symbol -->
<path d="M 152 152 A 75 60, 0, 1, 1, 302 152" style="fill: #cceeff;"/>

技术：从其他圆弧格式转换

其他一些矢量图形系统让你指定一个圆弧，椭圆，x - y半径的，开始角度，角度的圆弧程度定义一个中心点。这是一个简单的方法规范，并作为单一对象绘制弧线非常出色。矛盾的是，这也正是为什么SVG，而不是选择这样一个看似古怪的方法来指定弧。SVG，电弧不被推定为生活在孤独的辉煌，它的目的是直线和曲线的连接路径的一部分。（例如，一个圆角矩形，恰恰是-一个系列的线条和椭圆弧）。因此，它是有道理的，其端点指定弧。

然而，有时候，你不想一个孤立的半圆（或更准确地说，半椭圆形）。假设你有一个指定的椭圆：

<ellipse cx="cx" cy="cy" rx="rx" ry="ry"/>

这里的路径来绘制了四种可能的半椭圆形：

<!-- northern hemisphere -->
<path d="M cx-rx cy A rx ry 0 1 1 cx+rx cy"/>
<!-- southern hemipshere -->
<path d="M cx-rx cy A rx ry 0 1 0 cx+rx cy"/>
<!-- eastern hemisphere -->
<path d="M cx cy-ry A rx ry 0 1 1 cx cy+ry"/>
<!-- western hemisphere -->
<path d="M cx cy-ry A rx ry 0 1 0 cx cy+ry"/>

对于更一般的情况，当你想画一个任意弧已指定“中心角度”符号，并希望将其转换为SVG的“端点扫描”格式，请使用下面的Perl脚本。它会提示你为中心坐标，半径，起始角度，角度范围。输出是一个<PATH>的标签，你可以插入你的SVG文件。

#!/usr/bin/perl
use Math::Trig;#
#   Convert an elliptical arc based around a central point
#   to an elliptical arc parameterized for SVG.
#
#   Input is a list containing:
#       center x coordinate
#       center y coordinate
#       x-radius of ellipse
#       y-radius of ellipse
#       beginning angle of arc in degrees
#       arc extent in degrees
#       x-axis rotation angle in degrees
#
#   Output is a list containing:
#
#       x-coordinate of beginning of arc
#       y-coordinate of beginning of arc
#       x-radius of ellipse
#       y-radius of ellipse
#       large-arc-flag as defined in SVG specification
#       sweep-flag  as defined in SVG specification
#       x-coordinate of endpoint of arc
#       y-coordinate of endpoint of arc
#
sub convert_to_svg
{my ($cx, $cy, $rx, $ry, $theta1, $delta, $phi) = @_;my $theta2 = $delta + $theta1;$theta1 = deg2rad($theta1);$theta2 = deg2rad($theta2);my $phi_r = deg2rad($phi);##   Figure out the coordinates of the beginning and#   ending points#my $x0 = $cx + cos($phi_r) * $rx * cos($theta1) +sin(-$phi_r) * $ry * sin($theta1);my $y0 = $cy + sin($phi_r) * $rx * cos($theta1) +cos($phi_r) * $ry * sin($theta1);my $x1 = $cx + cos($phi_r) * $rx * cos($theta2) +sin(-$phi_r) * $ry * sin($theta2);my $y1 = $cy + sin($phi_r) * $rx * cos($theta2) +cos($phi_r) * $ry * sin($theta2);my $large_arc = ($delta > 180) ? 1 : 0;my $sweep = ($delta > 0) ? 1 : 0;return ($x0, $y0, $rx, $ry, $phi, $large_arc, $sweep, $x1, $y1);
}#
#   Request input
#
print "Enter center x,y coordinates > ";
$data = <>;
$data =~ s/,/ /g;
($cx, $cy) = split /\s+/, $data;print "Enter x and y radii > ";
$data = <>;
$data =~ s/,/ /g;
($rx, $ry) = split/\s+/, $data;print "Enter starting angle in degrees > ";
$theta = <>;
chomp $theta;print "Enter angle extent in degrees > ";
$delta = <>;
chomp $delta;print "Enter angle of rotation in degrees > ";
$phi = <>;
chomp $phi;#
#   Echo original data
#
print "(cx,cy)=($cx,$cy)  rx=$rx ry=$ry ","start angle=$theta extent=$delta rotate=$phi\n";($x0, $y0, $rx, $ry, $phi, $large_arc_flag, $sweep_flag, $x1, $y1) =convert_to_svg( $cx, $cy, $rx, $ry, $theta, $delta, $phi);#
#   Produce a <path> element that fits the
#   specifications
#
print "<path d=\"M $x0 $y0 ",   # Moveto initial point"A $rx $ry ",               # Arc command and radii,"$phi ",                    # angle of rotation,"$large_arc_flag ",         # the "large-arc" flag,"$sweep_flag ",             # the "sweep" flag,"$x1 $y1\"/>\n";            # and the endpoint

如果你想从SVG格式转换到“中心角度”格式，数学要复杂得多。你可以看到详细的公式中的SVG规范。这个Perl脚本改编从的Apache XML蜡染项目中的代码。

#!/usr/bin/perl
use Math::Trig;#
#   Convert an elliptical arc based around a central point
#   to an elliptical arc parameterized for SVG.
#
#   Input is a list containing:
#
#       x-coordinate of beginning of arc
#       y-coordinate of beginning of arc
#       x-radius of ellipse
#       y-radius of ellipse
#       large-arc-flag as defined in SVG specification
#       sweep-flag  as defined in SVG specification
#       x-coordinate of endpoint of arc
#       y-coordinate of endpoint of arc
#
#   Output is a list containing:
#       center x coordinate
#       center y coordinate
#       x-radius of ellipse
#       y-radius of ellipse
#       beginning angle of arc in degrees
#       arc extent in degrees
#       x-axis rotation angle in degrees
#sub convert_from_svg
{my ($x0, $y0, $rx, $ry, $phi, $large_arc, $sweep, $x, $y) = @_;# Compute 1/2 distance between current and final pointmy $dx2 = ($x0 - $x) / 2.0;my $dy2 = ($y0 - $y) / 2.0;# Convert from degrees to radians$phi %= 360;my $phi_r = deg2rad($phi);# Compute (x1, y1)my $x1 = cos($phi_r) * $dx2 + sin($phi_r) * $dy2;my $y1 = -sin($phi_r) * $dx2 + cos($phi_r) * $dy2;# Make sure radii are large enough$rx = abs($rx); $ry = abs($ry);my $rx_sq = $rx * $rx;my $ry_sq = $ry * $ry;my $x1_sq = $x1 * $x1;my $y1_sq = $y1 * $y1;$radius_check = ($x1_sq / $rx_sq) + ($y1_sq / $ry_sq);if ($radius_check > 1){$rx *= sqrt($radius_check);$ry *= sqrt($adius_check);$rx_sq = $rx * $rx;$ry_sq = $ry * $ry;}# Step 2: Compute (cx1, cy1)my $sign = ($large_arc == $sweep) ? -1 : 1;my $sq = (($rx_sq * $ry_sq) - ($rx_sq * $y1_sq) - ($ry_sq * $x1_sq)) /(($rx_sq * $y1_sq) + ($ry_sq * $x1_sq));$sq = ($sq < 0) ? 0 : $sq;my $coef = $sign * sqrt($sq);my $cx1 = $coef * (($rx * $y1) / $ry);my $cy1 = $coef * -(($ry * $x1) / $rx);#   Step 3: Compute (cx, cy) from (cx1, cy1)my $sx2 = ($x0 + $x) / 2.0;my $sy2 = ($y0 + $y) / 2.0;my $cx = $sx2 + (cos($phi_r) * $cx1 - sin($phi_r) * $cy1);my $cy = $sy2 + (sin($phi_r) * $cx1 + cos($phi_r) * $cy1);#   Step 4: Compute angle start and angle extentmy $ux = ($x1 - $cx1) / $rx;my $uy = ($y1 - $cy1) / $ry;my $vx = (-$x1 - $cx1) / $rx;my $vy = (-$y1 - $cy1) / $ry;my $n = sqrt( ($ux * $ux) + ($uy * $uy) );my $p = $ux; # 1 * ux + 0 * uy$sign = ($uy < 0) ? -1 : 1;my $theta = $sign * acos( $p / $n );$theta = rad2deg($theta);$n = sqrt(($ux * $ux + $uy * $uy) * ($vx * $vx + $vy * $vy));$p = $ux * $vx + $uy * $vy;$sign = (($ux * $vy - $uy * $vx) < 0) ? -1 : 1;my $delta = $sign * acos( $p / $n );$delta = rad2deg($delta);if ($sweep == 0 && $delta > 0){$delta -= 360;}elsif ($sweep == 1 && $delta < 0){$delta += 360;}$delta %= 360;$theta %= 360;return ($cx, $cy, $rx, $ry, $theta, $delta, $phi);
}#
#   Request input
#
print "Enter starting x,y coordinates > ";
$data = <>;
$data =~ s/,/ /g;
($x0, $y0) = split /\s+/, $data;print "Enter ending x,y coordinates > ";
$data = <>;
$data =~ s/,/ /g;
($x, $y) = split /\s+/, $data;print "Enter x and y radii > ";
$data = <>;
$data =~ s/,/ /g;
($rx, $ry) = split/\s+/, $data;print "Enter rotation angle in degrees ";
$phi = <>;
chomp $phi;print "Large arc flag (0=no, 1=yes) > ";
$large_arc = <>;
chomp $large_arc;print "Sweep flag (0=negative, 1=positive) > ";
$sweep = <>;
chomp $sweep;print "From ($x0,$y0) to ($x,$y) rotate $phi"," large arc=$large_arc sweep=$sweep\n";($cx, $cy, $rx, $ry, $theta, $delta, $phi) =convert_from_svg( $x0, $y0, $rx, $ry, $phi, $large_arc, $sweep, $x, $y );print "Ellipse center = ($cx, $cy)\n";
print "Start angle = $theta\n";
print "Angle extent = $delta\n";

贝赛尔曲线

弧可以作为清洁和功能特点，但很少人会用这个词“优雅”来形容他们。如果你想优雅，你需要使用所生产的图形二次和三次方程的曲线。数学家知道这些曲线数以百计年左右，但，绘制他们总是计算艰巨的任务。这改变了皮埃尔·贝兹时，法国汽车制造商雷诺和雪铁龙，工程师保罗·德·Casteljau的工作，独立地发现了一个计算方便的方式来生成这些曲线。

如果你已经使用的图形程序，如Adobe Illustrator中绘制这些贝塞尔曲线通过指定两个点，然后移动如下图所示的“把手”。这个手柄的端部被称为控制点，因为它控制着曲线的形状。当你移动的手柄，一种方式，曲线变化的门外汉，完全是神秘的。一个平面设计师迈克·伍德，在关键点软件，建议作为一种可视化的控制点和曲线如何交互图6-6：想象该行是由具有弹性的五金。内的控制点是磁铁;越接近的点的控制点，更强烈地被吸引。

Casteljau的方法构造的曲线是根据另一种方式来可视化的控制点的作用。在下面的章节中，我们将使用这种方法。对于进一步的细节，对底层的数学，提出了一个非常清晰的方式，请参阅网站：http://graphics.cs.ucdavis.edu/GraphicsNotes/Bezier-Curves/Bezier-Curves.html。

二次贝塞尔曲线

最简单的贝塞尔曲线是二次曲线。您指定的起点，终点和控制点。试想一下，两个帐篷杆放置在该行的端点。这些帐篷杆满足控制点。帐篷杆的中心之间的拉伸是以橡胶带。曲线弯曲的地方，橡皮筋绑在正中央。这种情况显示在图6-7中。

显示程序，如Adobe Illustrator中你只有一个“帐篷杆。” 下一次当你使用这样的程序，弱智加在第二极，并由此产生的曲线将远远不那么神秘。

这是概念，现在实际生产这种曲线在SVG的实际问题。指定二次曲线在<PATH>的数据与Q或Q命令。该命令随后由两套指定一个控制点和端点的坐标。大写的命令意味着绝对坐标;小写意味着相对坐标。绘制图6-7中的曲线（30，75）到（300，120）的控制点（240，30），和SVG中的指定如下：

<path d="M30 75 Q 240 30, 300 120" style="stroke: black; fill: none;"/>

您可以指定的坐标一个二次曲线命令后几套。这将产生一个的polybézier曲线。假定要绘制的曲线（30，100）到（100，100）具有一个控制点（80，30），然后继续用曲线控制点（200，80）与一个<路径>（130，65）。下面是SVG这条路，与控制点的坐标大胆。的结果示于图6-8的左半部分，控制点和线示于图中的右半部分。

<path d="M30 100 Q 80 30, 100 100, 130 65, 200 80"/>

你可能想知道，“发生了什么事`优雅？这个曲线仅仅是波诡云谲。“ 这是一个正确的评估。只是因为曲线连接并不意味着他们将一起好看。这就是为什么，SVG提供光滑二次曲线命令，这是Ť由字母（或吨，如果你要使用相对坐标）表示。该命令后跟一个端点的曲线，自动计算控制点，规范说，“反思当前点相对于前一个命令的控制点。”

注意

在算术上，新的控制点X2，Y2从曲线的起点x，Ÿ和以前的控制点X1，Y1这些公式计算：

x2 = 2 * x - x1
y2 = 2 * y - y1

下面是来自二次贝塞尔曲线（30，100），（100，100）与一个控制点（80，30），然后平稳地继续（200，80）。图6-9的左半部分显示的曲线;右半部分显示了控制点。用虚线示出的反射控制点。优美已经回来了！

<path d="M30 100 Q 80 30, 100 100 200 80"/>

三次贝塞尔曲线

一个单一的二次贝塞尔曲线有一个拐点（地步曲线变化方向）。虽然这些曲线是比简单的弧线更灵活，我们可以做得更好，通过三次贝塞尔曲线，它可以有一个或两个拐点。

之间的差异的平方和立方曲线，三次曲线有两个控制点，一个为每个端点。用于产生三次曲线的技术是相似的，用于产生二次曲线。你画三条线连接的端点和控制点（A），以及连接它们的中点。这产生了两行（二）。连接他们的中点，并产生一个（c）项，决定最后的曲线上的点的中点。[2]参见图6-10。

要指定这样三次曲线，使用Ç Ç命令的use the C or c command.。该命令后跟三组指定的控制点的开始点，结束点的控制点，和结束点的坐标。与所有其他路径命令，一个大写的命令意味着绝对坐标;小写意味着相对坐标。绘制前面的图中的曲线（20，80）到（200，120），与控制点（50，20），（150，60）。SVG的路径如下所示：

<path d="M20 80 C 50 20, 150 60, 200 120" style="stroke: black; fill: none;"/>

有许多有趣的曲线可以得出，根据控制点的关系（见图6-11）。为了使图形更清洁，我们只显示线从每个端点控制点的。

与二次曲线，你可以构造立方polybézier的三次曲线命令后，通过指定几套坐标。第一曲线的最后一个点成为下一个曲线的第一个点，依此类推。这里是一个<路径>的控制点（50，50）和（70，20）绘制三次曲线从（30，100），（100，100），它后面紧跟着的曲线加倍回（65，100）与控制点（110，130）和（45，150）。下面是SVG这条路，与控制点的坐标大胆。的结果示于图6-12的左半边的控制点和线是图中的右半部分所示的。

<path d="M30 100 C 50 50, 70 20, 100 100, 110, 130, 45, 150, 65, 100"/>

如果你想保证流畅的曲线之间的连接，你可以使用的的Ş命令（或S，如果你要使用相对坐标）。Ţ二次曲线命令的方式类似，将采取新的曲线上曲线的端点为起点，将是第一个控制点以前结束控制点的反射。所有您需要提供的将是下一个端点曲线上的控制点，其次是下一个端点本身。

下面是来自三次贝塞尔曲线（30，100）（100，100）与控制点（50，30）和（70，50）。它继续顺利（200，80），（150，40），其最终控制点。的上半部分示出的曲线;的下半部分示出的控制点。与图6-13中的虚线所示的反射控制点。

<path d="M30 100 C 50 30, 70 50, 100 100 S 150 40, 200 80"/>

路径汇总

Table 6-1. Path commands

Command	Arguments	Effect
`M m`	x y	Move to given coordinates.移动到指定的坐标
`L l`	x y	Draw a line to the given coordinates. You may supply multiple sets of coordinates to draw a polyline.画一条线给定的坐标。您可以提供多套坐标绘制折线。d
`H h`	x	Draw a horizontal line to the given x-coordinate.画一条水平线给定的x坐标。
`V v`	y	Draw a vertical line to the given x-coordinate.画垂直线的给定的x坐标。
`A a`	rx ry x-axis-rotation large-arc sweep x y	Draw an elliptical arc from the current point to (x, y). The points are on an ellipse with x-radius rx and y-radius ry. The ellipse is rotated x-axis-rotation degrees. If the arc is less than 180 degrees, large-arc is zero; if greater than 180 degrees, large-arc is one. If the arc is to be drawn in the positive direction, sweep is one; otherwise it is zero.绘制一个椭圆形的弧线，从当前点（，）。点是一个椭圆的X半径RX和y半径的RY。旋转椭圆的x轴的旋转度。如果电弧是小于180度，大弧是零，如果大于180度，大弧。如果电弧要被绘制在正方向扫描，否则它是零。
`Q q`	x1 y1 x y	Draw a quadratic Bézier curve from the current point to (x, y) using control point (x1, y1).绘制二次贝塞尔曲线从当前点（所述，Ÿ）使用控制点（X1，Y1）。
`T t`	x y	Draw a quadratic Bézier curve from the current point to (x, y). The control point will be the reflection of the previous Q command's control point. If there is no previous curve, the current point will be used as the control point.从目前的点（，）绘制二次贝塞尔曲线。控制点，将以前的Q命令的控制点的反射。如果没有先前的曲线，将被用作控制点的当前点。
`C c`	x1 y1 x2 y2 x y	Draw a cubic Bézier curve from the current point to (x, y) using control point (x1, y1) as the control point for the beginning of the curve and (x2, y2) as the control point for the endpoint of the curve.绘制三次方贝塞尔曲线从当前点（所述，Ÿ）使用的控制点控制点（X1，Y1）开始的曲线和曲线的端点的控制点（X2，Y2）
`S s`	x2 y2 x y	Draw a cubic Bézier curve from the current point to (x, y), using (x2, y2) as the control point for this new endpoint. The first control point will be the reflection of the previous C command's ending control point. If there is no previous curve, the current point will be used as the first control point. 绘制三次方贝塞尔曲线从当前点（所述，Ÿ），使用（X2，Y2）作为这个新端点的控制点。第一个控制点，将以前的Ç命令的结束控制点的反射。如果没有先前的曲线，将被用作当前点的第一控制点。

路径和灌装

在第3章第3.5.1节中所描述的信息也是适用的路径，这不仅可以有交叉线，但也可以有在他们的“洞”。考虑在实施例6-4中，这两个路径绘制嵌套平方。在所述第一路径中，这两个正方形顺时针绘制在第二路径中，外正方形绘制顺时针和逆时针绘制图的内方。

例6-4。使用不同的填充规则路径值

<!-- both paths clockwise -->
<path d="M 0 0, 60 0, 60 60, 0 60 ZM 15 15, 45 15, 45 45, 15 45Z"/><!-- outer path clockwise; inner path counterclockwise -->
<path d="M 0 0, 60 0, 60 60, 0 60 ZM 15 15, 15 45, 45 45, 45 15Z"/>

图6-14显示了，是有区别的，当你使用一个填充规则为零，考虑到方向的线路时，确定一个点是否是内部或外部的路径。使用填充规则EVENODD产生相同的结果，它使用两个路径总数串线，而忽略自己的方向。

标记元素

让我们假定以下路径，它使用一条线，一个椭圆弧，和另一条线画在图6-15中的圆角：

<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"style="fill: none; stroke: black;"/>

我们想标记的路径方向，把一个圆开始，扎实的三角形结束时，箭镞在其他顶点，如图6-16所示。要达到这个效果，我们将构建三个<marker>元素，并告诉<PATH>引用它们。

让我们开始与例6-5，这增加了圆形标记。一个标记是一个“自足”拥有自己的私人组坐标的图形，因此，您必须指定其markerWidth和markerHeight高度在开始<marker>标签。其次是的SVG元素绘制标记，并结束与收</标记>。本身不显示一个<marker>元素，但是我们把它在一个<defs>元素，因为那是可重用的元素属于。

既然我们要圆，在路径的开始，我们的风格添加一个标记开始在<PATH>。[3]此属性的值是一个URL参考元素我们已经<marker>刚刚创建的。

例6-5。第一次尝试在圆形标记

<defs>
<marker id="mCircle" markerWidth="10" markerHeight="10"><circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/>
</marker>
</defs><path  d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"style="marker-start: url(#mCircle);fill: none; stroke: black;"/>

在图6-17的结果并不完全是我们计划...

圆出现在错误的地方的原因是，默认情况下，开始标记的（0，0）点与年初的路径坐标对齐。增加了REFX和REFY的属性，让协调（例6-6标记的系统），以配合的开始坐标。一旦这些被添加的，圆形的标记出现，它的确切位置需要在图6-18。

例6-6。正确放置的圆形标记

<marker id="mCircle" markerWidth="10" markerHeight="10" refX="5" refY="5"> <circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/> </marker>

鉴于此信息，我们现在可以编写例6-7，这增加了三角形标记和引用标记的路径。然后，我们可以添加箭头标记，并引用它作为标记中旬。的标记中旬，将被附加到每个顶点以外的路径的开始和结束。REFX，REFY属性通知，已被设置，以便箭头的宽端与中间的顶点，而实心三角尖与结束顶点图6-19显示了结果，绘制第一标记正确，但没有其他的。

例6-7。尝试使用三个标志

<defs><marker id="mCircle" markerWidth="10" markerHeight="10"refX="5" refY="5"><circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/></marker><marker id="mArrow" markerWidth="6" markerHeight="10"refX="0" refY="4"><path d="M 0 0 4 4 0 8" style="fill: none; stroke: black;"/></marker><marker id="mTriangle" markerWidth="5" markerHeight="10"refX="5" refY="5"><path d="M 0 0 5 5 0 10 Z" style="fill: black;"/></marker>
</defs><path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"style="marker-start: url(#mCircle);marker-mid: url(#mArrow);marker-end: url(#mTriangle);fill: none; stroke: black;"/>

为了得到你想要的效果，你必须明确地设置自动标记的东方属性。这使得自动旋转的方向相匹配的路径[4] （也可以指定某一度数，在这种情况下，该标记将始终按照该量旋转。）在这里，在实施例6-8中标记设置产生的效果如图6-16所示。我们不需要定向圈，它看起来相同的，不管它是如何旋转。

例6-8。正确导向标志

<defs><marker id="mCircle" markerWidth="10" markerHeight="10"refX="5" refY="5"><circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/></marker><marker id="mArrow" markerWidth="6" markerHeight="10"refX="0" refY="4" orient="auto"><path d="M 0 0 4 4 0 8" style="fill: none; stroke: black;"/></marker><marker id="mTriangle" markerWidth="5" markerHeight="10"refX="5" refY="5" orient="auto"><path d="M 0 0 5 5 0 10 Z" style="fill: black;"/></marker>
</defs><path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"style="marker-start: url(#mCircle);marker-mid: url(#mArrow);marker-end: url(#mTriangle);fill: none; stroke: black;"/>

另一个有用的属性是属性的markerUnits。如果设置标记的到strokeWidth，设定坐标系，因此一个单位等于笔划宽度。这使您的标记笔划宽度比例增长，它的默认行为，它通常是你想要什么。如果将该属性设置为userSpaceOnUse被假定为相同的坐标系中的对象引用标记，该标记的坐标。标记不论行程宽度保持相同的大小。

标记杂记

如果你想在开始，中间和结束的路径相同的标记，你不需要指定所有标记开始标记中旬，和标记高端物业。只要使用标记属性并将其引用标记你想。因此，如果我们想要的所有顶点，有一个圆形的标记，如图6-20所示，我们写的SVG 例6-9。

例6-9。使用单一标记的所有顶点

<defs><marker id="mCircle" markerWidth="10" markerHeight="10" refX="5" refY="5"><circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/></marker>
</defs><path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"style="marker: url(#mCircle); fill: none; stroke: black;"/>

另外，也可以设置的的viewBox preserveAspectRatio的属性，在<marker>元素，以获得更精确的控制其显示。正是这些工作中所描述的第2章，第2.3节和2.4节中。

中<polygon> <polyline>，或<LINE>元素，以及在一个<路径>您可能引用<marker>的。

可能发生在你下面的思想：“如果一个标记可以有一个路径，该路径可以有一个标记，以及连接到它吗？“ 答案是肯定的，它可以，但第二个标记必须融入由第一标记的markerWidth markerHeight的矩形成立。请记住，只是因为可以做的事情并不意味着它应该做的。如果你需要这样的效果，你可能会更好过绘制辅助标记为主要标志的一部分，而不是试图嵌套标记。

笔记

↑您也可以把多个单坐标lineTo的水平或垂直划线到后，虽然这是相当没有意义的，这样做是一样H 45 H 25 35 45，是同为v 39和V 11 13 15。
↑我们免除帐篷比喻，它变得太笨重。根据蒙古包和短程线圆顶曲线留给读者作为练习。
↑是，标记被认为是演示，而不是结构的一部分。这是那些灰色地带，你可能会说这两种情况下。
↑为了更加精确，旋转进入该顶点的顶点的线的方向的线的方向的角度的平均值。

m.kuanggouli.cn 推广返充值