分享：MDN的CSS+SVG花朵示例

马黑黑 发表于 2023-11-11 10:22

马黑黑 发表于 2023-11-11 10:24

代码未做改动，仅将分离的CSS和SVG合成在了一起：
<style>
/*** 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;
}
</style>

<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>

醉美水芙蓉 发表于 2023-11-11 12:42

小辣椒 发表于 2023-11-11 15:15

黑黑好，这个CSS+SVG的编辑路径看上去特别漂亮

小辣椒 发表于 2023-11-11 15:16

学习在线生成svg感觉很重要的

小辣椒 发表于 2023-11-11 15:17

不会在线编辑svg路径就玩不成了

马黑黑 发表于 2023-11-11 17:03

小辣椒发表于 2023-11-11 15:17
不会在线编辑svg路径就玩不成了

svg路径的指令并不多，有兴趣的花点时间学一下就好

马黑黑 发表于 2023-11-11 17:03

小辣椒发表于 2023-11-11 15:16
学习在线生成svg感觉很重要的

ps也可以制作路径，自由度更高

马黑黑 发表于 2023-11-11 17:04

小辣椒发表于 2023-11-11 15:15
黑黑好，这个CSS+SVG的编辑路径看上去特别漂亮

这是官网的示例，确实很美

小辣椒 发表于 2023-11-11 18:57

马黑黑发表于 2023-11-11 17:03
svg路径的指令并不多，有兴趣的花点时间学一下就好

好的

小辣椒 发表于 2023-11-11 18:58

马黑黑发表于 2023-11-11 17:03
ps也可以制作路径，自由度更高

PS路径没有玩过，黑黑PS制作也是会啊，厉害的

小辣椒 发表于 2023-11-11 18:59

马黑黑发表于 2023-11-11 17:04
这是官网的示例，确实很美

这个看上去代码也是不少的

千羽发表于 2023-11-11 19:33

这朵花儿挺漂亮的，鼠标放上去之后就会有立锥之地了，还会跟着转呢，有意思{:4_203:}{:4_173:}

千羽发表于 2023-11-11 19:34

黑黑老师棒棒哒{:4_187:}

马黑黑 发表于 2023-11-11 19:50

千羽发表于 2023-11-11 19:34
黑黑老师棒棒哒

{:4_190:}

马黑黑 发表于 2023-11-11 19:50

醉美水芙蓉发表于 2023-11-11 12:42
黑黑老师中午好！这朵太阳花真漂亮！

晚上好

红影发表于 2023-11-13 10:34

这个漂亮，鼠标跟随着动呢，色彩配置也漂亮{:4_187:}

红影发表于 2023-11-13 10:35

这个竟然每个花瓣单独写路径啊，这个花瓣本来就对称形状的，需要这么麻烦么？
咋不把黑黑请去，一个JS代码简简单单就搞定了啊{:4_173:}

马黑黑 发表于 2023-11-13 10:49

红影发表于 2023-11-13 10:35
这个竟然每个花瓣单独写路径啊，这个花瓣本来就对称形状的，需要这么麻烦么？
咋不把黑黑请去，一个JS代码 ...

其实路径是一样的。官网这个示例，意在展示 CSS+svg的合作，尤其是CSS变量在svg中的应用，所以没有使用JS

马黑黑 发表于 2023-11-13 10:50

小辣椒发表于 2023-11-11 18:59
这个看上去代码也是不少的

丰富的细节需要足够多的代码去描述

页: [1] 2

花潮论坛's Archiver

分享：MDN的CSS+SVG花朵示例