wap SVG 第3章：基本形状

最新推荐文章于 2021-10-11 12:23:05 发布

stary1

最新推荐文章于 2021-10-11 12:23:05 发布

阅读量3.7k

点赞数

分类专栏： html5 文章标签： HTML5 SVG 第三章基本形状

本文链接：https://blog.csdn.net/lcy132100/article/details/9303737

版权

html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章内容均来自http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Basic_Shapes

一旦建立坐标系在<svg>标签，你是准备开始绘制。在本章中，我们将展示基本的形状，你可以用它来创建最图纸的主要元素：线条，矩形，多边形，圆，椭圆。

线

SVG可以让你画一条直线与<LINE>元素。只要指定x - Ÿ坐标线的端点。可以指定坐标没有单位的，在这种情况下，他们被认为是用户坐标，或与单位，如EM，等所描述的第2章，第2.1节。例3-1 SVG 绘制几行，参考网格图3-1是不是你在这里看到的SVG。

<line x1="start-x" y1="start-y"
 x2="end-x" y2="end-y">

基本线

行程特点

正如第2章中提到的，在画布上的网格线是无限薄。，然后，一条线或中风有关的网格线下降？答案是，网格线属于中风的中心。例3-2绘制一些线条笔划宽度已经被设置为十个用户协调，使效果明显。在图3-2中，有结果，绘制网格线，这样你就可以清楚地看到效果。

描边颜色

颜色关键字 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

或者RGB三原色，每个值的范围是0-255的百分比，取值范围0%-100%

<svg width="200px" height="200px" viewBox="0 0 200 200">
   <!-- red -->
   <line x1="10" y1="10" x2="50" y2="10"
      style="stroke: red; stroke-width: 5;"/> 

   <!-- light green -->
   <line x1="10" y1="20" x2="50" y2="20"
      style="stroke: #9f9; stroke-width: 5;"/>

   <!-- light blue -->
   <line x1="10" y1="30" x2="50" y2="30"
      style="stroke: #9999ff; stroke-width: 5;"/>

   <!-- medium orange -->
   <line x1="10" y1="40" x2="50" y2="40"
      style="stroke: rgb(255, 128, 64); stroke-width: 5;"/>

   <!-- deep purple -->
   <line x1="10" y1="50" x2="50" y2="50"
      style="stroke: rgb(60%, 20%, 60%); stroke-width: 5;"/>
</svg>

颜色的透明度是值是0.0-1.0之间，小于0，值将被改为0，大于1，值将被改为1

<svg width="200px" height="200px" viewBox="0 0 200 200">
   <line x1="10" y1="10" x2="50" y2="10"
      style="stroke-opacity: 0.2; stroke: black; stroke-width: 5;"/> 
   <line x1="10" y1="20" x2="50" y2="20"
      style="stroke-opacity: 0.4; stroke: black; stroke-width: 5;"/> 
   <line x1="10" y1="30" x2="50" y2="30"
      style="stroke-opacity: 0.6; stroke: black; stroke-width: 5;"/> 
   <line x1="10" y1="40" x2="50" y2="40"
      style="stroke-opacity: 0.8; stroke: black; stroke-width: 5;"/> 
   <line x1="10" y1="50" x2="50" y2="50" 
      style="stroke-opacity: 1.0; stroke: black; stroke-width: 5;"/> 
</svg>

stroke-dasharray attribute(属性)

如果您需要点缀或虚线使用stroke-dasharray 其值包含的号码清单，由逗号或空格分隔，指定划线长度和差距。列表中的条目中有偶数个，但是如果为奇数个条目,SVG列表，一边将重复条目的总数是偶数。

<svg width="200px" height="200px" viewBox="0 0 200 200">
   <!-- nine-pixel dash, five-pixel gap -->
   <line x1="10" y1="10" x2="100" y2="10"
       style="stroke-dasharray: 9, 5;
       stroke: black; stroke-width: 2;"/>

   <!-- five-pixel dash, three-pixel gap, nine-pixel dash, two-pixel gap -->
   <line x1="10" y1="20" x2="100" y2="20"
       style="stroke-dasharray: 5, 3, 9, 2;
       stroke: black; stroke-width: 2;"/>

   <!-- Odd number of entries is duplicated; this is equivalent to:
        nine-pixel dash, three-pixel gap,  five-pixel dash, 
        nine-pixel gap,  three-pixel dash, five-pixel gap -->
   <line x1="10" y1="30" x2="100" y2="30"
       style="stroke-dasharray: 9, 3, 5;
       stroke: black; stroke-width: 2;"/>
</svg>

矩形

该矩形是最简单的基本形状。可以指定的 x -和：Ý坐标的矩形的左上角，[1]的宽度，并且其高度。内部填充的矩形填充指定颜色。如果你不指定填充颜色，形状，内部填充黑色。填充颜色可能被指定在第3.2.2节中描述的方法，或者它可能采取的价值没有离开室内填补的，因此透明的。你也可以指定一个填充不透明度，在相同的格式，当你在3.2.3节。这两种填充和填充不透明度显示属性，属于风格属性。

后内部填充（如有必要），连招，其特性可以指定你做线绘制矩形的轮廓。如果你不指定stroke-dasharray ，价值没有被推定，没有轮廓绘制。例3-6绘制几个变化的<rect>元素。图3-6显示了结果，参考一格。

<svg width="200px" height="200px" viewBox="0 0 200 200">
   <!-- nine-pixel dash, five-pixel gap -->
   <line x1="10" y1="10" x2="100" y2="10"
       style="stroke-dasharray: 9, 5;
       stroke: black; stroke-width: 2;"/>

   <!-- five-pixel dash, three-pixel gap, nine-pixel dash, two-pixel gap -->
   <line x1="10" y1="20" x2="100" y2="20"
       style="stroke-dasharray: 5, 3, 9, 2;
       stroke: black; stroke-width: 2;"/>

   <!-- Odd number of entries is duplicated; this is equivalent to:
        nine-pixel dash, three-pixel gap,  five-pixel dash, 
        nine-pixel gap,  three-pixel dash, five-pixel gap -->
   <line x1="10" y1="30" x2="100" y2="30"
       style="stroke-dasharray: 9, 3, 5;
       stroke: black; stroke-width: 2;"/>
</svg>

如果您不指定一个起始的x 或Ý值，它被假定为零。如果您指定的宽度或高度为零，那么矩形将不显示。这是一个错误，无论是宽度或高度为负值。

圆角矩形

如果你想有圆角矩形，指定X - Ÿ拐角的曲率半径。你可以指定为RX（半径的x）的最大数量是一个矩形的宽度的一半; Ry的（Ý半径）的最大值是一个一半的矩形的高度。如果仅指定一个RX或RY，他们被假定是平等的。例3-7显示了各种组合的RX和RY。

<svg width="200px" height="200px" viewBox="0 0 200 200">
   <!-- rx and ry equal, increasing -->
   <rect x="10" y="10" width="20" height="40" rx="2" ry="2"
       style="stroke: black; fill: none;"/>

   <rect x="40" y="10" width="20" height="40" rx="5"
       style="stroke: black; fill: none;"/>

   <rect x="70" y="10" width="20" height="40" ry="10"
       style="stroke: black; fill: none;"/>

   <!-- rx and ry unequal -->
   <rect x="10" y="60" width="20" height="40" rx="10" ry="5"
       style="stroke: black; fill: none;"/>

   <rect x="40" y="60" width="20" height="40" rx="5" ry="10"
       style="stroke: black; fill: none;"/>
</svg>

圆和椭圆

要画一个圆圈，使用<circle>元素，并指定X -坐标的中心，中心Ÿ坐标和半径与CX，CY，和ŗ属性的。用矩形，默认是填补了一圈黑色和画没有轮廓，除非你指定其他一些组合填充和描边。

椭圆形也需要一个x半径和一Ý半径，除了一个中心的x - y轴坐标。这些半径的属性被命名为rx和Ry的。

圆和椭圆，如果CX和CY被省略，它被假定为零。如果半径为零，不变形，将显示这是一个错误，提供负半径。例3-8绘制一些圆形和椭圆形，如图3-9所示。

<svg width="200px" height="200px" viewBox="0 0 200 200">
   <circle cx="30" cy="30" r="20" style="stroke: black; fill: none;"/>
   <circle cx="80" cy="30" r="20"
      style="stroke-width: 5; stroke: black; fill: none;"/>

   <ellipse cx="30" cy="80" rx="10" ry="20" 
      style="stroke: black; fill: none;"/>
   <ellipse cx="80" cy="80" rx="20" ry="10" 
      style="stroke: black; fill: none;"/>
</svg>

多边形元素

除了矩形，圆形和椭圆形的，你可能想得出六角形，八角形，星星，或任意封闭的形状。<polygon>元素让你指定一系列的点，描述了一个几何要填充区域，并概述如前所述。点属性，包括一系列的x - y轴坐标对用逗号或空格分隔。你必须给的数字系列中的条目数为偶数。您不必返回到起点的形状将被自动关闭。例3-9使用的<polygon>元素，画出一个平行四边形，一个星形，和一个不规则的形状。

<svg width="200px" height="200px" viewBox="0 0 200 200">
    <!-- parallelogram -->
    <polygon points="15,10  55, 10  45, 20  5, 20"
        style="fill: red; stroke: black;"/>

    <!-- star -->
    <polygon
        points="35,37.5  37.9,46.1 46.9,46.1  39.7,51.5
            42.3,60.1  35,55  27.7,60.1  30.3,51.5
            23.1,46.1  32.1,46.1"
        style="fill: #ccffcc; stroke: green;"/>

    <!-- weird shape -->
    <polygon 
        points="60 60,  65 72,  80 60,  90 90, 72 80, 72 85, 50 95"
        style="fill: yellow; fill-opacity: 0.5; stroke: black;
            stroke-width: 2;"/> 
</svg>

填充多边形的相交线

到目前为止所显示的多边形，它很容易以填充形状。由于内部的线形成的多边形的交叉彼此，很容易区分从外部的形状。然而，当线跨越彼此，里面是什么多边形的决心是不容易。例3-10中的SVG 绘制多边形。在图3-11中，认为是内侧或外侧的星级的中间部分？

<svg width="200px" height="200px" viewBox="0 0 200 200">

<polygon  points="48,16  16,96  96,48  0,48  80,96"
    style="stroke: black; fill: none;"/>

</svg>

SVG有两种不同的规则来确定一个点是否是多边形内部还是外部。填充规则（这是演示的一部分）有一个值为零或EVENODD。根据您所选择的规则，你会得到不同的效果。例3-11使用规则的明星，以填补两个图，如图3-12所示

<svg width="200px" height="200px" viewBox="0 0 200 200">

<polygon style="fill-rule: nonzero; fill: yellow; stroke: black;"
    points="48,16  16,96  96,48  0,48  80,96" />

<polygon style="fill-rule: evenodd;  fill: #00ff00; stroke: black;"
    points="148,16  116,96  196,48  100,48  180,96" />

</svg>

填充规则说明

为了完整性，我们描述如何将这些填充规则的工作，但为了使用它们，你不需要知道的细节。非零规则确定一个点是否是内部或外部的多边形绘制一条线从问题到无穷大的点。多少次线穿过多边形的线条，添加一个如果多边形线从右到左，再减去一个多边形线从左到右计数。如果总为零，该点以外的多边形。如果总为零（因此而得名）点是在多边形内部。

EVENODD规则还绘制一条线，从点到无穷大的问题，但它只是计算了多少次线穿过多边形的线条。如果过路的总数是奇数，那么点里面，如果是偶数，则点之外

For the sake of completeness, we are describing how these fill-rules work, but you don't need to know the details in order to use them. The nonzero rule determines whether a point is inside or outside a polygon by drawing a line from the point in question to infinity. It counts how many times that line crosses the polygon's lines, adding one if the polygon line is going right to left, and subtracting one if the polygon line is going left to right. If the total comes out to zero, the point is outside the polygon. If the total is nonzero (hence the name) the point is inside the polygon.

The evenodd rule also draws a line from the point in question to infinity, but it simply counts how many times that line crosses your polygon's lines. If the total number of crossings is odd, then the point is inside; if even, then the point is outside.

折线元素

<svg width="200px" height="200px" viewBox="0 0 200 200">

<polyline
    points="5 20, 20 20, 25 10, 35 30, 45 10,
        55 30, 65 10, 75 30, 80 20, 95 20"
    style="stroke: black; stroke-width: 3; fill: none;"/> 

</svg>

这是最好的填充属性设置无使用<polyline>时，否则，SVG浏览器试图填充形状

<line x1="10" y1="15" x2="50" y2="15"
    style="stroke-linecap: butt; stroke-width: 15;"/>

<line x1="10" y1="45" x2="50" y2="45"
    style="stroke-linecap: round; stroke-width: 15;"/> 

<line x1="10" y1="75" x2="50" y2="75"
    style="stroke-linecap: square; stroke-width: 15;"/> 

<!-- guide lines -->
<line x1="10" y1="0" x2="10" y2="100" style="stroke: #999;"/>
<line x1="50" y1="0" x2="50" y2="100" style="stroke: #999;"/>

您可以指定形状的角落的stroke-linejoin的样式属性，这可能值斜切（指出），圆（圆-你期望什么呢？），或锥（平）线的方式连接。例图3-14产生了结果如图3-16所示。

<polyline
    style="stroke-linejoin: miter; stroke: black; stroke-width: 12;
    fill: none;"
    points="30 30, 45 15, 60 30"/> 

<polyline
    style="stroke-linejoin: round; stroke: black; stroke-width: 12;
    fill: none;"
    points="90 30, 105 15, 120 30"/> 

<polyline
    style="stroke-linejoin: bevel; stroke-width: 12; stroke: black;
    fill: none;"
    points="150 30, 165 15, 180 30"/>

基本形状参考摘要

下面的表总结了svg的基本形状和表现风格

Shape	Description
<line x1="start-x" y1="start-y" x2="end-x" y2="end-y"/>	Draws a line from the starting point at coordinates (start-x, start-y) to the ending point at coordinates (end-x, end-y). 绘制在坐标（-X开始，开始-γ）线从起点到终点坐标（结束-X -Y月底）。
<rect x="left-x" y="top-y" width="width" height="height"/>	Draws a rectangle whose upper left corner is at (left-x, top-y) with the given width and height. 绘制一个矩形，其左上角（左-X ，顶部-Y ），在给定的宽度和高度。
<circle cx="center-x" cy="center-y" r="radius"/>	Draws a circle with the given radius, centered at (center-x, center-y). 绘制一个圆的半径，中心（中心-X 中心-Y ）。
<ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius"/>	Draws an ellipse with the given x-radius and y-radius centered at (center-x, center-y). 绘制一个椭圆x半径和y半径（中心-X 中心-Y ）为中心的。
<polygon points="points-specifications"/>	Draws an arbitrary closed polygon whose outline is described by the points-specification. The points are specified as pairs of x- and y-coordinates. These are user coordinates only; you may not add a length unit specifier. 绘制任意一个封闭的多边形，点规范描述其轮廓。点被指定为对x - ，y轴坐标。这些用户只坐标，你可能不添加一个指定长度单位。
<polyline points="points-specifications"/>	Draws an arbitrary series of connected lines as described by the points-specification. The points are specified as pairs of x- and y-coordinates. These are user coordinates only; you may not add a length unit specifier. 绘制任意一个系列的连接线所描述的分规范。点被指定为对x - ，y轴坐标。这些用户只坐标，你可能不添加一个指定长度单位。

指定颜色

您可以指定的颜色填充或概述的形状通过以下方式之一：

没有表明没有轮廓要被绘制的形状是不被填充。
颜色的名字，这是一个浅绿色，黑色，蓝色，紫红色，灰色，绿色，石灰，栗色，海军蓝，橄榄绿，紫色，红色，银色，青色，白色或黄色。
六十六进制数字＃ RRGGBB，每对描述红色，绿色和蓝色的值。
三十六进制数字RGB，描述了红色，绿色和蓝色的值。这是以前的方法的简写，数字被复制，使RGB＃＃RRGGBB。
rgb的（ ŗ 克， b ），每一个值，该值取值范围从0至255或从0％到100％。

填充颜色Fill characteristics

为了看一条线或轮廓的形状，你必须指定行程的特点，使用下面的属性。绘制形状的轮廓后，其内部填充。所有这些特点

Attribute	Values
fill	The fill color, as described in Section 3.8.2. 填充颜色，第3.8.2节中所描述的。
fill-opacity	A number ranging from 0.0 to 1.0; 0.0 is entirely transparent, 1.0 is entirely opaque. 一个数字范围从0.0到1.0; 0.0是完全透明的，1.0是完全不透明的。
fill-rule	This attribute can have the values nonzero or evenodd, which apply different rules for determining whether a point is inside or outside a shape. These rules generate different effects only when a shape has intersecting lines or "holes" in it. Details are in Section 3.5.1 earlier in this chapter. 这个属性的值可以是非零或EVENODD，适用不同的规则来确定一个点是否是内部或外部的形状。这些规则产生不同的效果，只有当交叉线或“孔”，其形状。详情第3.5.1本章前面。

stary1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
wap SVG 第3章：基本形状

文章内容均来自http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Basic_Shapes一旦建立坐标系在标签，你是准备开始绘制。在本章中，我们将展示基本的形状，你可以用它来创建最图纸的主要元素：线条，矩形，多边形，圆，椭圆。线SVG可以让你画一条直线与元素。只要指定x-Ÿ坐标线的端点。可以指定坐标没有单位的，
复制链接

扫一扫