https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS
两种方式的CSS
SVGCSS:
/*** SVG demonstration ***/ /* page */ svg { background-color: beige; } #heading { font-size: 24px; font-weight: bold; } #caption { font-size: 12px; } /* flower */ #flower:hover { cursor: crosshair; } /* gradient */ #fade-stop-1 { stop-color: blue; } #fade-stop-2 { stop-color: white; } /* petals */ .segment-fill { fill: var(--segment-fill-fill); stroke: var(--segment-fill-stroke); stroke-width: var(--segment-fill-stroke-width); } .segment-fill:hover { fill: var(--segment-fill-fill-hover); stroke: var(--segment-fill-stroke-hover); } .segment-edge { fill: var(--segment-edge-fill); stroke: var(--segment-edge-stroke); stroke-width: var(--segment-edge-stroke-width); } .segment-edge:hover { stroke: var(--segment-edge-stroke-hover); } /* outer petals */ #outer-petals { opacity: 0.75; --segment-fill-fill: azure; --segment-fill-stroke: lightsteelblue; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: deepskyblue; --segment-edge-stroke-width: 3; --segment-fill-fill-hover: plum; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: slateblue; } /* Non-standard way of styling elements referenced via <use> elements, supported by some older browsers */ #outer-petals .segment-fill { fill: azure; stroke: lightsteelblue; stroke-width: 1; } #outer-petals .segment-edge { fill: none; stroke: deepskyblue; stroke-width: 3; } #outer-petals .segment:hover > .segment-fill { fill: plum; stroke: none; } #outer-petals .segment:hover > .segment-edge { stroke: slateblue; } /* inner petals */ #inner-petals { --segment-fill-fill: yellow; --segment-fill-stroke: yellow; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: yellowgreen; --segment-edge-stroke-width: 9; --segment-fill-fill-hover: darkseagreen; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: green; } /* Non-standard way of styling elements referenced via <use> elements, supported by some older browsers */ #inner-petals .segment-fill { fill: yellow; stroke: yellow; stroke-width: 1; } #inner-petals .segment-edge { fill: none; stroke: yellowgreen; stroke-width: 9; } #inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none; } #inner-petals .segment:hover > .segment-edge { stroke: green; }
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>A Multi-line CSS only Typewriter effect </title> <meta name="Description" content="geovindu,涂聚文,Geovin Du"/> <meta name="Keywords" content="geovindu,涂聚文,Geovin Du"/> <meta name="author" content="geovindu,涂聚文,Geovin Du"/> <link rel="stylesheet" href="../bootstrap/4.6.2/css/bootstrap.min.css"> <script src="../js/jquery-3.6.0.js"></script> <script src="../popperjs/4.1/popper.min.js"></script> <script src="../bootstrap/4.6.2/js/bootstrap.min.js" type="text/javascript"></script> <script src="../ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <script type="text/javascript" src="../assets/js/DuSize.js"></script> <link rel="stylesheet" href="css/svg.css"> </head> <body> <svg width="600px" height="600px" viewBox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>SVG demonstration</title> <desc>Mozilla CSS Getting Started - SVG demonstration</desc> <defs> <radialGradient id="fade" cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> <stop id="fade-stop-1" offset="33%" /> <stop id="fade-stop-2" offset="95%" /> </radialGradient> </defs> <text id="heading" x="-280" y="-270">SVG demonstration</text> <text id="caption" x="-280" y="-250"> Move your mouse pointer over the flower. </text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)" /> <g id="outer-petals"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(36)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(54)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(72)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(90)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(108)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(126)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(144)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(162)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(180)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(198)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(216)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(234)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(252)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(270)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(288)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(306)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(324)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(342)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> </g> <g id="inner-petals" transform="rotate(9) scale(0.33)"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(36)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(54)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(72)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(90)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(108)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(126)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(144)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(162)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(180)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(198)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(216)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(234)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(252)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(270)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(288)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(306)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(324)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(342)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> </g> </g> </svg> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>A Multi-line CSS only Typewriter effect </title> <meta name="Description" content="geovindu,涂聚文,Geovin Du"/> <meta name="Keywords" content="geovindu,涂聚文,Geovin Du"/> <meta name="author" content="geovindu,涂聚文,Geovin Du"/> <link rel="stylesheet" href="../bootstrap/4.6.2/css/bootstrap.min.css"> <script src="../js/jquery-3.6.0.js"></script> <script src="../popperjs/4.1/popper.min.js"></script> <script src="../bootstrap/4.6.2/js/bootstrap.min.js" type="text/javascript"></script> <script src="../ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <script type="text/javascript" src="../assets/js/DuSize.js"></script> <style type="text/css"> svg { background-color: beige; } /* inner petals 有效 */ #inner-petals { --segment-fill-fill: yellow; --segment-fill-stroke: yellow; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: yellowgreen; --segment-edge-stroke-width: 9; --segment-fill-fill-hover: darkseagreen; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: green; } /* outer petals */ #outer-petals { opacity: 0.75; --segment-fill-fill: azure; --segment-fill-stroke: lightsteelblue; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: deepskyblue; --segment-edge-stroke-width: 3; --segment-fill-fill-hover: plum; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: slateblue; } /* petals */ .segment-fill { fill: var(--segment-fill-fill); stroke: var(--segment-fill-stroke); stroke-width: var(--segment-fill-stroke-width); } .segment-fill:hover { fill: var(--segment-fill-fill-hover); stroke: var(--segment-fill-stroke-hover); } .segment-edge { fill: var(--segment-edge-fill); stroke: var(--segment-edge-stroke); stroke-width: var(--segment-edge-stroke-width); } .segment-edge:hover { stroke: var(--segment-edge-stroke-hover); } </style> </head> <body> <svg id="svgdu" width="600px" height="600px" viewBox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>SVG demonstration</title> <desc>Mozilla CSS Getting Started - SVG demonstration</desc> <style> /*** SVG demonstration ***/ svg { background-color: beige; } /* page */ #heading { font-size: 24px; font-weight: bold; } #caption { font-size: 12px; } /* flower */ #flower:hover { cursor: crosshair; } /* gradient */ #fade-stop-1 { stop-color: blue; } #fade-stop-2 { stop-color: white; } #inner-petals .segment-fill { fill: yellow; stroke: yellow; stroke-width: 1; } /* petals */ .segment-fill { fill: var(--segment-fill-fill); stroke: var(--segment-fill-stroke); stroke-width: var(--segment-fill-stroke-width); } .segment-fill:hover { fill: var(--segment-fill-fill-hover); stroke: var(--segment-fill-stroke-hover); } .segment-edge { fill: var(--segment-edge-fill); stroke: var(--segment-edge-stroke); stroke-width: var(--segment-edge-stroke-width); } .segment-edge:hover { stroke: var(--segment-edge-stroke-hover); } /* outer petals */ #outer-petals { opacity: 0.75; --segment-fill-fill: azure; --segment-fill-stroke: lightsteelblue; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: deepskyblue; --segment-edge-stroke-width: 3; --segment-fill-fill-hover: plum; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: slateblue; } /* Non-standard way of styling elements referenced via <use> elements, supported by some older browsers */ #outer-petals .segment-fill { fill: azure; stroke: lightsteelblue; stroke-width: 1; } #outer-petals .segment-edge { fill: none; stroke: deepskyblue; stroke-width: 3; } #outer-petals .segment:hover > .segment-fill { fill: plum; stroke: none; } #outer-petals .segment:hover > .segment-edge { stroke: slateblue; } /* inner petals */ #inner-petals { --segment-fill-fill: yellow; --segment-fill-stroke: yellow; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: yellowgreen; --segment-edge-stroke-width: 9; --segment-fill-fill-hover: darkseagreen; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: green; } /* Non-standard way of styling elements referenced via <use> elements, supported by some older browsers */ #inner-petals .segment-fill { fill: yellow; stroke: yellow; stroke-width: 1; } #inner-petals .segment-edge { fill: none; stroke: yellowgreen; stroke-width: 9; } #inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none; } #inner-petals .segment:hover > .segment-edge { stroke: green; } .segment-fill { fill: var(--segment-fill-fill); stroke: var(--segment-fill-stroke); stroke-width: var(--segment-fill-stroke-width); } .segment-fill:hover { fill: var(--segment-fill-fill-hover); stroke: var(--segment-fill-stroke-hover); } </style> <defs> <radialGradient id="fade" cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> <stop id="fade-stop-1" offset="33%" /> <stop id="fade-stop-2" offset="95%" /> </radialGradient> </defs> <text id="heading" x="-280" y="-270">SVG demonstration</text> <text id="caption" x="-280" y="-250"> Move your mouse pointer over the flower. </text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)" /> <g id="outer-petals"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(36)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(54)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(72)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(90)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(108)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(126)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(144)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(162)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(180)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(198)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(216)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(234)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(252)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(270)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(288)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(306)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(324)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(342)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> </g> <g id="inner-petals" transform="rotate(9) scale(0.33)"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(36)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(54)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(72)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(90)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(108)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(126)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(144)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(162)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(180)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(198)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(216)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(234)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(252)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(270)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(288)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(306)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(324)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g class="segment" transform="rotate(342)"> <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> </g> </g> </svg> </body> </html>
标签:hover,--,SVG,stroke,edge,CSS,segment,css,fill From: https://www.cnblogs.com/geovindu/p/17678274.html