【Journey of HarmonyOS Next】Developing Based on ArkTS (3) -> JS-Compatible Web Development (5) -> Svg

1 -> Basics

SVG components are primarily used as the root node of the SVG canvas, but can also be nested within SVG.

illustrate

Supported from API version 7.

The SVG parent component or SVG component needs to define the width and height values, otherwise it will not be drawn.

1.1 -> Create an Svg component

Create an Svg component in the hml file in the pages/index directory.

<!-- test.hml -->
<div class="container">
  <svg width="400" height="400">  </svg>
</div>

/* test.css */
.container{
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
svg{
  background-color: blue;
}

1.2 -> Set Properties

Set the width, height, x-coordinates, y-coordinates, and Svg viewport for the Svg by setting the width, height, x, y, and viewBox properties.

<!-- test.hml -->
<div class="container">
  <svg width="400" height="400" viewBox="0 0 100 100">    <svg class="rect" width="100" height="100" x="20" y="10">    </svg>  </svg>
</div>

/* test.css */
.container{
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
svg{
  background-color: yellow;
}
.rect{
  background-color: red;
}

illustrate

x and y are set to the x-axis and y-axis coordinates of the current Svg, if the current Svg is the root node, the x-axis and y-axis properties are invalid.

The width and height of the viewBox are inconsistent with the width and height of the svg, and they are scaled in center alignment.

2 -> Draw a graph

SVG components can be used to draw common shapes and line segments, such as rectangles (), circles (), lines (), etc.

In this scene, various shapes are drawn and stitched together to form a small house.

<!-- test.hml -->
<div class="container">
  <svg width="1000" height="1000">
    <polygon points="100,400 300,200 500,400" fill="red"></polygon>     //屋顶
    <polygon points="375,275 375,225 425,225 425,325" fill="orange"></polygon>   //烟囱
    <rect width="300" height="300" x="150" y="400" fill="orange">      //房子
    </rect>
    <rect width="100" height="100" x="180" y="450" fill="white">    //窗户
    </rect>
    <line x1="180" x2="280" y1="500" y2="500" stroke-width="4" fill="white" stroke="black"></line>     //窗框
    <line x1="230" x2="230" y1="450" y2="550" stroke-width="4" fill="white" stroke="black"></line>     //窗框
    <polygon points="325,700 325,550 400,550 400,700" fill="red"></polygon>     //门
    <circle cx="380" cy="625" r="20" fill="black"></circle>      //门把手
  </svg>
</div>

/* test.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

3 -> Draw the path

When the SVG component draws a path, it uses the M (starting point), H (horizontal line), and a (draw arc to the specified position) path control commands in the path and fills the color to achieve the pie chart effect.

<!-- test.hml -->
<div class="container">
  <svg fill="#00FF00" x="100" y="400">
    <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="red" stroke="blue" stroke-width="5" >    </path> <path d="M275,175 v-150 a150 150 0 0 0 -150 150 z" fill="yellow" stroke="blue" stroke-width="5">    </path>
  </svg>
</div>

/* test.css */
.container {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  height: 1200px;
  width: 600px;
  background-color: #F1F3F5;
}

illustrate

M/m = moveto The parameters x and y represent the coordinates of the x- and y-axes that need to be moved to the point. When you move a brush with the M command, only the brush is moved, but no line is drawn between two points. Therefore, the M command is often used at the beginning of the path to indicate where to start drawing.

L/l = lineto The parameters x and y represent the x- and y-axis coordinates of a point, and the L command will draw a line segment between the current position and the new position (the point where the brush is in front of L).

H/h = horizontal lineto draw parallel lines.

V/v = vertical lineto draw vertical lines.

C/c = curveto cubic Bezier curve sets three sets of coordinate parameters: x1 y1, x2 y2, x y.

The S/s = smooth curveto cubic Bezier command sets two sets of coordinate parameters: x2 y2, x y.

Q/q = quadratic Belzier curve sets two sets of coordinate parameters: x1 y1, x y.

T/t = smooth quadratic Belzier curveto command setting parameter: x y.

A/a = elliptical Arc command to set parameters: rx ry x-axis-rotation (rotation angle) large-arc-flag (angle size) sweep-flag (arc direction) x y. large-arc-flag determines whether the arc is greater than or less than 180 degrees, with 0 representing a small-angle arc and 1 representing a large-angle arc. sweep-flag indicates the direction of the arc, 0 means to draw an arc counterclockwise from the start point to the end point, and 1 means to draw an arc clockwise from the start point to the end point.

Z/z = closepathDraw a straight line from the current point to the start of the path.

4 -> Draw text

SVG components can also draw text.

4.1 -> Text

illustrate

The display content of the text needs to be written in the element tag text, and the tspan sub-element tag segment can be nested.

Only the parent element tag SVG can be nested.

Only the default font sans-serif is supported.

Different display styles of text can be achieved by setting attributes such as x (x-axis coordinates), y (y-axis coordinates), dx (text x-axis offset), dy (text y-axis offset), fill (font fill color), stroke (text border color), stroke-width (text border width) and other attributes.

<!-- test.hml -->
<div class="container">
  <svg>
    <text x="200" y="300" font-size="80px" fill="blue" >Hello World</text>    <text x="200" y="300" dx="20" dy="80" font-size="80px" fill="blue" fill-opacity="0.5" stroke="red" stroke-width="2">Hello World</text>
    <text x="20" y="550" fill="#D2691E">
      <tspan dx="40" fill="red" font-size="80" fill-opacity="0.4">Hello World </tspan>
    </text>
  </svg>
</div>

4.2 -> Draw text along a path

TextPathThe text content draws the text along the path in the property path.

<!-- test.hml -->
<div class="container">
  <svg fill="#00FF00" x="100" y="400">
    <path d="M40,360 Q360,360 360,180 Q360,20 200,20 Q40,40 40,160 Q40,280 180,180 Q180,180 200,100" stroke="red" fill="none"></path>
      <text>
        <textpath fill="blue" startOffset="20%" path="M40,360 Q360,360 360,180 Q360,20 200,20 Q40,40 40,160 Q40,280 180,180 Q180,180 200,100" font-size="30px">
          This is textpath test.
        </textpath>
      </text>
  </svg>
</div>