Basics
The <svg> component is used as the root node of the SVG canvas and can be nested in the SVG. For details, see svg.
NOTE:
The APIs of this component are supported since API version 7.
The width and height must be defined for the <svg> parent component or <svg> component. Otherwise, the component is not drawn.
Creating an <svg> Component
Create a <svg> component in the .hml file under pages/index.
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400"> </svg>
</div>
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
svg{
background-color: blue;
}
Setting Attributes
Set the width, height, x, y, and viewBox attributes to define the width, height, X coordinate, Y coordinate, and SVG viewport of the <svg> component.
<!-- xxx.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>
/* xxx.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;
}
NOTE:
If the <svg> component is the root node, the X-axis and Y-axis attributes are invalid.
If the width and height of viewBox are inconsistent with those of the <svg> component, the view box will be scaled in center-aligned mode.