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

马黑黑

马黑黑

代码未做改动，仅将分离的CSS和SVG合成在了一起：

1. <style>
   
2. /*** SVG demonstration ***/
   
3. 
   
4. /* page */
   
5. svg {
   
6.   background-color: beige;
   
7. }
   
8. 
   
9. #heading {
   
10.   font-size: 24px;
    
11.   font-weight: bold;
    
12. }
    
13. 
    
14. #caption {
    
15.   font-size: 12px;
    
16. }
    
17. 
    
18. /* flower */
    
19. #flower:hover {
    
20.   cursor: crosshair;
    
21. }
    
22. 
    
23. /* gradient */
    
24. #fade-stop-1 {
    
25.   stop-color: blue;
    
26. }
    
27. 
    
28. #fade-stop-2 {
    
29.   stop-color: white;
    
30. }
    
31. 
    
32. /* petals */
    
33. .segment-fill {
    
34.   fill: var(--segment-fill-fill);
    
35.   stroke: var(--segment-fill-stroke);
    
36.   stroke-width: var(--segment-fill-stroke-width);
    
37. }
    
38. 
    
39. .segment-fill:hover {
    
40.   fill: var(--segment-fill-fill-hover);
    
41.   stroke: var(--segment-fill-stroke-hover);
    
42. }
    
43. 
    
44. .segment-edge {
    
45.   fill: var(--segment-edge-fill);
    
46.   stroke: var(--segment-edge-stroke);
    
47.   stroke-width: var(--segment-edge-stroke-width);
    
48. }
    
49. 
    
50. .segment-edge:hover {
    
51.   stroke: var(--segment-edge-stroke-hover);
    
52. }
    
53. 
    
54. /* outer petals */
    
55. #outer-petals {
    
56.   opacity: 0.75;
    
57.   --segment-fill-fill: azure;
    
58.   --segment-fill-stroke: lightsteelblue;
    
59.   --segment-fill-stroke-width: 1;
    
60.   --segment-edge-fill: none;
    
61.   --segment-edge-stroke: deepskyblue;
    
62.   --segment-edge-stroke-width: 3;
    
63.   --segment-fill-fill-hover: plum;
    
64.   --segment-fill-stroke-hover: none;
    
65.   --segment-edge-stroke-hover: slateblue;
    
66. }
    
67. 
    
68. /*
    
69. Non-standard way of styling elements referenced via <use> elements,
    
70. supported by some older browsers
    
71. */
    
72. #outer-petals .segment-fill {
    
73.   fill: azure;
    
74.   stroke: lightsteelblue;
    
75.   stroke-width: 1;
    
76. }
    
77. 
    
78. #outer-petals .segment-edge {
    
79.   fill: none;
    
80.   stroke: deepskyblue;
    
81.   stroke-width: 3;
    
82. }
    
83. 
    
84. #outer-petals .segment:hover > .segment-fill {
    
85.   fill: plum;
    
86.   stroke: none;
    
87. }
    
88. 
    
89. #outer-petals .segment:hover > .segment-edge {
    
90.   stroke: slateblue;
    
91. }
    
92. 
    
93. /* inner petals */
    
94. #inner-petals {
    
95.   --segment-fill-fill: yellow;
    
96.   --segment-fill-stroke: yellow;
    
97.   --segment-fill-stroke-width: 1;
    
98.   --segment-edge-fill: none;
    
99.   --segment-edge-stroke: yellowgreen;
    
100.   --segment-edge-stroke-width: 9;
     
101.   --segment-fill-fill-hover: darkseagreen;
     
102.   --segment-fill-stroke-hover: none;
     
103.   --segment-edge-stroke-hover: green;
     
104. }
     
105. 
     
106. /*
     
107. Non-standard way of styling elements referenced via <use> elements,
     
108. supported by some older browsers
     
109. */
     
110. #inner-petals .segment-fill {
     
111.   fill: yellow;
     
112.   stroke: yellow;
     
113.   stroke-width: 1;
     
114. }
     
115. 
     
116. #inner-petals .segment-edge {
     
117.   fill: none;
     
118.   stroke: yellowgreen;
     
119.   stroke-width: 9;
     
120. }
     
121. 
     
122. #inner-petals .segment:hover > .segment-fill {
     
123.   fill: darkseagreen;
     
124.   stroke: none;
     
125. }
     
126. 
     
127. #inner-petals .segment:hover > .segment-edge {
     
128.   stroke: green;
     
129. }
     
130. </style>
     
131. 
     
132. <svg
     
133.   width="600px"
     
134.   height="600px"
     
135.   viewBox="-300 -300 600 600"
     
136.   xmlns="http://www.w3.org/2000/svg"
     
137.   xmlns:xlink="http://www.w3.org/1999/xlink">
     
138. 
     
139.   <title>SVG demonstration</title>
     
140.   <desc>Mozilla CSS Getting Started - SVG demonstration</desc>
     
141. 
     
142.   <defs>
     
143.     <radialGradient
     
144.       id="fade"
     
145.       cx="0"
     
146.       cy="0"
     
147.       r="200"
     
148.       gradientUnits="userSpaceOnUse">
     
149.       <stop id="fade-stop-1" offset="33%" />
     
150.       <stop id="fade-stop-2" offset="95%" />
     
151.     </radialGradient>
     
152.   </defs>
     
153. 
     
154.   <text id="heading" x="-280" y="-270">SVG demonstration</text>
     
155.   <text id="caption" x="-280" y="-250">
     
156.     Move your mouse pointer over the flower.
     
157.   </text>
     
158. 
     
159.   <g id="flower">
     
160.     <circle
     
161.       id="overlay"
     
162.       cx="0"
     
163.       cy="0"
     
164.       r="200"
     
165.       stroke="none"
     
166.       fill="url(#fade)" />
     
167. 
     
168.     <g id="outer-petals">
     
169.       <g class="quadrant">
     
170.         <g class="segment">
     
171.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
172.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
173.         </g>
     
174.         <g class="segment" transform="rotate(18)">
     
175.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
176.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
177.         </g>
     
178.         <g class="segment" transform="rotate(36)">
     
179.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
180.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
181.         </g>
     
182.         <g class="segment" transform="rotate(54)">
     
183.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
184.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
185.         </g>
     
186.         <g class="segment" transform="rotate(72)">
     
187.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
188.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
189.         </g>
     
190.       </g>
     
191. 
     
192.       <g class="quadrant">
     
193.         <g class="segment" transform="rotate(90)">
     
194.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
195.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
196.         </g>
     
197.         <g class="segment" transform="rotate(108)">
     
198.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
199.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
200.         </g>
     
201.         <g class="segment" transform="rotate(126)">
     
202.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
203.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
204.         </g>
     
205.         <g class="segment" transform="rotate(144)">
     
206.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
207.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
208.         </g>
     
209.         <g class="segment" transform="rotate(162)">
     
210.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
211.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
212.         </g>
     
213.       </g>
     
214. 
     
215.       <g class="quadrant">
     
216.         <g class="segment" transform="rotate(180)">
     
217.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
218.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
219.         </g>
     
220.         <g class="segment" transform="rotate(198)">
     
221.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
222.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
223.         </g>
     
224.         <g class="segment" transform="rotate(216)">
     
225.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
226.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
227.         </g>
     
228.         <g class="segment" transform="rotate(234)">
     
229.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
230.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
231.         </g>
     
232.         <g class="segment" transform="rotate(252)">
     
233.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
234.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
235.         </g>
     
236.       </g>
     
237. 
     
238.       <g class="quadrant">
     
239.         <g class="segment" transform="rotate(270)">
     
240.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
241.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
242.         </g>
     
243.         <g class="segment" transform="rotate(288)">
     
244.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
245.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
246.         </g>
     
247.         <g class="segment" transform="rotate(306)">
     
248.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
249.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
250.         </g>
     
251.         <g class="segment" transform="rotate(324)">
     
252.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
253.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
254.         </g>
     
255.         <g class="segment" transform="rotate(342)">
     
256.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
257.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
258.         </g>
     
259.       </g>
     
260.     </g>
     
261. 
     
262.     <g id="inner-petals" transform="rotate(9) scale(0.33)">
     
263.       <g class="quadrant">
     
264.         <g class="segment">
     
265.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
266.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
267.         </g>
     
268.         <g class="segment" transform="rotate(18)">
     
269.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
270.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
271.         </g>
     
272.         <g class="segment" transform="rotate(36)">
     
273.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
274.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
275.         </g>
     
276.         <g class="segment" transform="rotate(54)">
     
277.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
278.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
279.         </g>
     
280.         <g class="segment" transform="rotate(72)">
     
281.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
282.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
283.         </g>
     
284.       </g>
     
285. 
     
286.       <g class="quadrant">
     
287.         <g class="segment" transform="rotate(90)">
     
288.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
289.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
290.         </g>
     
291.         <g class="segment" transform="rotate(108)">
     
292.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
293.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
294.         </g>
     
295.         <g class="segment" transform="rotate(126)">
     
296.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
297.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
298.         </g>
     
299.         <g class="segment" transform="rotate(144)">
     
300.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
301.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
302.         </g>
     
303.         <g class="segment" transform="rotate(162)">
     
304.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
305.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
306.         </g>
     
307.       </g>
     
308. 
     
309.       <g class="quadrant">
     
310.         <g class="segment" transform="rotate(180)">
     
311.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
312.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
313.         </g>
     
314.         <g class="segment" transform="rotate(198)">
     
315.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
316.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
317.         </g>
     
318.         <g class="segment" transform="rotate(216)">
     
319.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
320.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
321.         </g>
     
322.         <g class="segment" transform="rotate(234)">
     
323.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
324.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
325.         </g>
     
326.         <g class="segment" transform="rotate(252)">
     
327.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
328.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
329.         </g>
     
330.       </g>
     
331. 
     
332.       <g class="quadrant">
     
333.         <g class="segment" transform="rotate(270)">
     
334.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
335.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
336.         </g>
     
337.         <g class="segment" transform="rotate(288)">
     
338.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
339.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
340.         </g>
     
341.         <g class="segment" transform="rotate(306)">
     
342.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
343.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
344.         </g>
     
345.         <g class="segment" transform="rotate(324)">
     
346.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
347.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
348.         </g>
     
349.         <g class="segment" transform="rotate(342)">
     
350.           <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
     
351.           <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10" />
     
352.         </g>
     
353.       </g>
     
354.     </g>
     
355.   </g>
     
356. </svg>

复制代码

小辣椒

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

小辣椒

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

小辣椒

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

马黑黑

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

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

马黑黑

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

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

马黑黑

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

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

小辣椒

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

好的

小辣椒

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

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

小辣椒

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

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

千羽

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

千羽

黑黑老师棒棒哒

马黑黑

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

马黑黑

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

晚上好

红影

这个漂亮，鼠标跟随着动呢，色彩配置也漂亮

红影

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

马黑黑

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

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

马黑黑

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

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