"SVG essence" notes (b)

3. Document Structure

Using styles (four ways, you can think of HTML style control method) in SVG

Inline style , set style properties directly on the tag

<circle cx='20' cy='20' r='10' style='stroke: black; fill: blue;'/>

Internal style sheet , the style may be simultaneously provided to a plurality of elements demo

<svg width="200px" height="200px" viewBox="0 0 200 200">
    <defs>
        <style type="text/css"><![CDATA[
            circle {
                fill: #ffc;
                stroke: blue;
                stroke-width: 2;
                stroke-dasharray: 5 3
            }
        ]]></style>
    </defs>

    <circle cx="20" cy="20" r="10"/>
    <circle cx="20" cy="60" r="10" style="fill: #cfc"/>
</svg>

This uses <![CDATA[...]]>block parcel <style>元素CSS code within the (All text in an XML document is parsed by the parser, only the text in a CDATA section will be ignored by the parser)

External style sheet , the style of writing in an external file, for the use of one or more SVG documents

    <!-- ext_style.css -->
    * { fill: none; stroke: black; }
    rect { stroke-dasharray: 7 3;}
    .thick { stroke-width: 5; }

    <?xml-stylesheet href="ext_style.css" type="text/css"?>
        ...
        <rect x="10" y="20" width="40" height="30"/>
        <polygon class="thick" points="60 50, 60 80, 90 80"/>
        ...

Performance properties , SVG allows us to style statement inside the property directly as SVG use element. The following two codes are the same effect.
```

<circle cx="10" cy="10" r="5" style="fill: red; stroke: black; stroke-width: 2;"/>
```
```

<circle cx="10" cy="10" r="5" fill="red"; stroke="black"; stroke-width="2"/>
```
Performance attribute is the lowest priority of all styles, but will override inherited styles.

SVG provides elements that allow us to group elements, making the document more structured and easier to understand. <g> element will all its child element as a combination, the combination will usually have a unique id as the name. Each combination can also have their own and . And provide some notes as child elements, making the document structure clearer. In the style definition of the label will be applied to all sub-elements. (G is an element used to combine objects container. G added to the conversion element will be applied to all of its child elements. G attribute added to the element are inherited by all of its child elements. Further, g elements may also be used defining complex objects, then they can be referenced by the <use> element.) the SVG use elements, defined as providing the ability to copy and paste the like, or any combination of graphical elements within a separate element. Graphic elements need to repeat the use of SVG allows us to define the future. It recommended that all references to the elements to be reused in the definition of inside defs element. This will increase the readability of SVG content and accessibility. Graphic elements defined in the defs element does not directly appear. You can use these elements presented <use> element anywhere in your viewport. Demo Symbol element defines a template graphic object that can be a <use> element is instantiated. the role of the graphic symbol for the element is used multiple times in the same document, add structure and semantics. Extensive documentation structure can be more vividly to life, similar speeches or Braille, so as to enhance accessibility. Note that a symbol element itself is not presented. Only examples of symbol elements (ie, a reference to the symbol of the <use> element) to render. Demo Image element can contain a complete SVG or raster files.

<g>元素
<title><desc><g>

<use>元素
<use><g>

<defs>元素

<symbol>元素

<image>元素

4. The coordinate system transformation

CSS3 Transform property of the control can learn to understand.

Convert	description
translate(x, y)	Value of the mobile user system according to the specified coordinate x and y. If you do not specify the value of y, it is assumed to be 0 Demo
scale(xFactor, yFactor)	Specified xFactor and yFactor multiplied by all the user coordinate system. Decimal scale value may be negative or the demo
scale(factor)	And scale (factor, factor) identical
rotate(angle, centerX, centerY)	According to the coordinates of the rotation angle specified by the user. And by a specified rotational center centerX centerY Demo
skewX(angle)	The inclination of all x-coordinate of the specified angle. Visually speaking, this angle will appear as vertical lines demo
skewY(angle)	Inclination y coordinates of all the specified angle. From a visual perspective, it makes a horizontal line appears angle
matrix(a b c d e f)	Specify a transformation matrix composed of six values

Tip: How to zoom around a center point?

To scale an object can do around a point in the given ratio:

translate(-centerX * (factor - 1), -centerY * (factor - 1))
scale(factor)

Further stroke-width value may be also divided by the scaling factor so that the scaled contour remains the same width.

<!-- 缩放中心 -->
<circle cx="50" cy="50" r="2" style="fill: black;"/>

<!-- 未缩放的矩形 -->
<g id="box" style="stroke: black; fill: none;">
    <rect x="35" y="40" width="30" height="20"/>
</g>

<use xlink:href="#box" transform="translate(-50, -50) scale(2)" style="stroke-width: 0.5;"/>
<use xlink:href="#box" transform="translate(-75, -75) scale(2.5)" style="stroke-width: 0.4;"/>
<use xlink:href="#box" transform="translate(-100, -100) scale(3)" style="stroke-width: 0.33;"/>

Original link: http://codesnote.com/svg_tutorial_part1/

3. Document Structure

4. The coordinate system transformation

Guess you like