index.hml

<div class="container">
    <div class="style-container">
        <text class="title">
            通用样式
        </text>
        <text class="sub-title">
            rect通用样式1
        </text>
            <rect class="style1" id="style1" x="0" y="-5" width="30" height="30" ></rect>
        <text  class="sub-title">
            rect通用样式2
        </text>
        <svg x="0" y="0" width="100" height="100">
            <rect class="style2" id="style2" x="0" y="10" width="30" height="30" fill="blue"></rect>
        </svg>
        <text  class="sub-title">
            rect通用样式3
        </text>
        <svg  x="0" y="0" width="100" height="100"  >
            <rect  class="style3" id="style3" x="0" y="0" width="30" height="30" fill="blue" fill-opacity="0.5"></rect>
        </svg>
        <text  class="sub-title">
            rect通用样式4
        </text>
        <svg  x="0" y="0" width="100" height="80" >
            <rect class="style4" id="style4" x="10" y="5" width="50" height="50" fill="blue" fill-opacity="0" stroke="yellow" stroke-width="4" rx="10" ry="10" ></rect>
        </svg>
        <text  class="sub-title">
            rect通用样式5
        </text>
        <div class="contain1">
            <svg  width="100" height="30">
                <rect class="style5" id="style5" x="10" y="0" width="70" height="30" fill="blue" ></rect>
            </svg>
            <svg  width="100" height="30">
                <rect class="style6" id="style6" x="10" y="0" width="70" height="30" fill="blue" ></rect>
            </svg>
        </div>
    </div>
    <divider style="color: #000000; stroke-width: 2px;" vertical="true">
    </divider>
    <div class="sub-container">
        <div class="prop-container">
            <text class="title">
                通用属性
            </text>
            <text class="sub-title">
                rect通用属性1
            </text>
            <svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60"  id="prop1" class="prop1" data-name ="prop1">
                <rect x="10" y="10" width="50" height="50" fill-opacity="0.5"></rect>
                <rect x="80" y="10" width="50" height="50" opacity="0.8"></rect>
            </svg>

            <text  class="sub-title">
                rect通用属性2
            </text>
            <svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60" ref ="prop2" class="prop2" data-name ="prop2" >
                <rect x="10" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white"></rect>
                <rect x="70" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="yellow" stroke-dasharray="5 3" stroke-dashoffset="10"></rect>
                <rect x="130" y="10" width="50" height="50" stroke="blue"  stroke-width="4" stroke-dashoffset="10" fill="white" stroke-opacity="0.6"></rect>
            </svg>
            <text  class="sub-title">
                rect通用属性3
            </text>
            <svg id="prop3" class="prop3" x="0" y="0" width="180" height="140" viewBox="0 0 180 140" >
                <rect x="10" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white" transform="rotate(-10)"></rect>
                <rect x="60" y="10" width="50" height="50" stroke="red"  stroke-width="4" fill="white"  transform="translate(40)"></rect>
                <rect x="10" y="70" width="50" height="50" stroke="red"  stroke-width="4" fill="white"  transform="skewX(10)"></rect>
                <rect x="120" y="70" width="50" height="50" stroke="red"  stroke-width="4" fill="white" transform="skewY(5)"></rect>
            </svg>
            <text  class="sub-title">
                rect特有属性4
            </text>
            <svg id="prop4" class="prop4" x="0" y="0" width="200" height="80" viewBox="0 100 60" fill="white">
                <rect x="0" y="10" width="50" height="50" stroke="red" stroke-width="3"></rect>
                <rect x="60" y="10" width="50" height="50" stroke="yellow" stroke-width="3" rx="10" ry="10"></rect>
                <rect x="120" y="10" width="50" height="50" stroke="blue" stroke-width="3" rx="10" ry="10" ></rect>
            </svg>
        </div>
        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
        </divider>
        <div class="ani-container">
            <text class="title">
                动画样式
            </text>
            <text class="sub-title">
                rect动画样式1
            </text>
            <svg width="200" height="100">
                <rect x="20" y="10" width="60" height="60" fill="red" rx="0" ry="20">
                    <animate attributeName="rx" values="0;20" dur="1000" repeatCount="10" fill="freeze" calcMode="linear"></animate>
                </rect>
            </svg>
            <text class="sub-title">
                rect动画样式2
            </text>
            <svg width="200" height="100">
                <rect x="20" y="10" width="50" height="50" fill="red" rx="0" ry="20">
                    <animate attributeName="fill" from="red" to="blue" dur="1000" repeatCount="indefinite"></animate>
                    <animate attributeName="height" from="50" to="100" begin="500" end="1000" repeatCount="indefinite">  </animate>
                </rect>
            </svg>
        </div>
    </div>

    <divider style="color: #000000; stroke-width: 2px;" vertical="true">
    </divider>

    <div class="sub-container">
        <div class="gradient-container">
            <text class="title">
                渐变样式
            </text>
            <text class="sub-title">
                rect渐变样式1
            </text>
            <svg class="gradient1" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
                <rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="block" stroke-width="4" rx="10" ry="10" stroke-dasharray="5 3" stroke-dashoffset="3"></rect>
            </svg>
            <text  class="sub-title">
                rect渐变样式2
            </text>
            <svg class="gradient2"  x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
                <rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="blue" stroke-width="4" rx="10" ry="10" ></rect>
            </svg>
            <text  class="sub-title">
                rect渐变样式3
            </text>
            <svg class="gradient3"  x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
                <rect x="10" y="5" width="50" height="50" fill="pink" fill-opacity="0" stroke="yellow" stroke-width="4" rx="10" ry="10" ></rect>
            </svg>
            <text  class="sub-title">
                rect渐变样式4
            </text>
            <svg class="gradient4" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
                <rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="red" stroke-width="4"></rect>
            </svg>
        </div>
        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
        </divider>
        <div class="access-container">
            <text class="title">
                无障碍
            </text>
            <text class="sub-title">
                rect无障碍1
            </text>
            <svg class="access1" accessibilitygroup ="true"
                 accessibilitytext="这是circle"
                 accessibilitydescription="rect"
                 accessibilityimportance="no-hide-descendants"
                 width="200" height="50" >
                <rect x="10" y="5" width="200" height="50" fill="#00FF00"></rect>
            </svg>
        </div>
        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
        </divider>

        <div class="multimode-container">
            <text class="title">
                多模输入
            </text>
            <text class="sub-title">
                rect多模输入1
            </text>
            <svg class="multimode1" width="200" height="50"  voicelabel = "voice"
                 subscriptflag="on" subscriptlabel="divider" scenelabel="common">
                <rect x="10" y="5" width="200" height="50" fill="#978666"></rect>
            </svg>
        </div>
    </div>
</div>