nicenote/docs/fea/svg/index.md

nav	group
title path 前端 /fea	title order path SVG 1 /svg

基本介绍

import React from 'react';

export default () => {
  return (
    <div>
      <svg x="0px" y="0px" width="500px" height="360px" viewBox="0 0 500 100">
        <rect
          x="10"
          y="5"
          fill="white"
          stroke="green"
          width="90"
          height="90"
        ></rect>
        <circle cx="170" cy="50" r="45" fill="black" stroke="red"></circle>
        <line
          fill="none"
          stroke="black"
          x1="230"
          y1="6"
          x2="260"
          y2="95"
        ></line>
        <ellipse cx="400" cy="50" rx="60" ry="30" />
        <g>
          <path
            id="svg_5"
            d="m148.60774,139.10039c28.24222,-69.1061 138.89615,0 0,88.8507c-138.89615,-88.8507 -28.24222,-157.9568 0,-88.8507z"
            fill-opacity="null"
            stroke-opacity="null"
            stroke-width="1.5"
            stroke="#000"
            fill="red"
          />
          <path
            id="svg_6"
            d="m265.00089,146.09396l19.88082,-21.09307l21.11909,22.40665l21.11909,-22.40665l19.88101,21.09307l-21.11909,22.40684l21.11909,22.40684l-19.88101,21.09326l-21.11909,-22.40684l-21.11909,22.40684l-19.88082,-21.09326l21.11891,-22.40684l-21.11891,-22.40684z"
            fill-opacity="null"
            stroke-opacity="null"
            stroke-width="1.5"
            stroke="#000"
            fill="#ccc"
          />
        </g>
      </svg>
    </div>
  );
};

基础动画案例