svg文档当图片使用演示

马黑黑

调整图片宽高尺寸

width="300" height="300"

马黑黑

一楼完整代码

1. <style>
   
2.         #mydiv { margin: 20px auto; width: 600px; height: 600px; text-align: center; }
   
3.         .flex { display: flex; align-items: center; justify-content: center; gap:8px; }
   
4. </style>
   
5. 
   
6. <div id="mydiv">
   
7.         <img id="mypic" alt="" src="https://638183.freep.cn/638183/web/svg/sunfl-1.svg" width="300" height="300" />
   
8. </div>
   
9. 
   
10. <p class="flex">
    
11.         <label for="rng">调整图片宽高尺寸</label>
    
12.         <input id="rng" type="range" min="30" max="600" value="300" step="10" />
    
13.         <output id="rngMsg">width="300" height="300"</output>
    
14. </p>
    
15. 
    
16. <script>
    
17. rng.oninput = () => {
    
18.         rngMsg.innerText = 'width="' + rng.value + '" height="' + rng.value + '"';
    
19.         mypic.setAttribute('width',rng.value);
    
20.         mypic.setAttribute('height',rng.value);
    
21. };
    
22. </script>

复制代码

马黑黑

sunfl-1.svg 文件完整代码：

1. <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
   
2.     <defs>
   
3.         <pattern id="sunflower" width="100%" height="100%" viewBox="0 0 300 300">
   
4.             <polygon fill="red" stroke="green" fill-rule="evenodd" points="300.00,150.00 2.28,123.95 290.95,201.30 20.10,75.00 264.91,246.42 53.58,35.09 225.00,279.90 98.70,9.05 176.05,297.72 150.00,0.00 123.95,297.72 201.30,9.05 75.00,279.90 246.42,35.09 35.09,246.42 279.90,75.00 9.05,201.30 297.72,123.95 0.00,150.00 297.72,176.05 9.05,98.70 279.90,225.00 35.09,53.58 246.42,264.91 75.00,20.10 201.30,290.95 123.95,2.28 150.00,300.00 176.05,2.28 98.70,290.95 225.00,20.10 53.58,264.91 264.91,53.58 20.10,225.00 290.95,98.70 2.28,176.05" />
   
5.         </pattern>
   
6.     </defs>
   
7. 
   
8.     <circle cx="200" cy="200" r="200" fill="url(#sunflower)" />
   
9. </svg>

复制代码

马黑黑

说明：

.svg文档要能当图片使用，三楼代码中的第01行必须保留这一句——

xmlns="http://www.w3.org/2000/svg"

马黑黑

sunfl-1.svg 原始图片宽高以 rect 的尺寸为标准，200*200

亦是金

请问老师向日葵svg文档是怎么制作的？想学习制作！

红影

这个图图好，可以像普通图片一样使用，还能用记事本打开。使用时可以用css调整，事先也可以用记事本调整到想要的尺寸

红影

马黑黑 发表于 2023-11-3 13:36
说明：

.svg文档要能当图片使用，三楼代码中的第01行必须保留这一句——

嗯嗯，记下了

红影

马黑黑 发表于 2023-11-3 13:38
sunfl-1.svg 原始图片宽高以 rect 的尺寸为标准，200*200

没看懂，这张原始图片的宽高应该是400*400 啊

马黑黑

红影 发表于 2023-11-3 14:53
没看懂，这张原始图片的宽高应该是400*400 啊

这是考题，我就看看谁认真了

马黑黑

红影 发表于 2023-11-3 14:52
嗯嗯，记下了

这个很重要，没有它，双击 .svg 文档，只出代码

马黑黑

红影 发表于 2023-11-3 14:47
这个图图好，可以像普通图片一样使用，还能用记事本打开。使用时可以用css调整，事先也可以用记事本调整到 ...

最主要的，怎么放大，它都不会失真

红影

马黑黑 发表于 2023-11-3 21:30
这是考题，我就看看谁认真了

耶，看样子我通过考试了

红影

马黑黑 发表于 2023-11-3 21:30
这个很重要，没有它，双击 .svg 文档，只出代码

原来xmlns="http://www.w3.org/2000/svg" 这么有用。

红影

马黑黑 发表于 2023-11-3 21:31
最主要的，怎么放大，它都不会失真

是的，特别神奇

马黑黑

红影 发表于 2023-11-3 22:55
是的，特别神奇

svg的出发点之一，就是制作可伸缩的矢量图形

马黑黑

红影 发表于 2023-11-3 22:54
原来xmlns="http://www.w3.org/2000/svg" 这么有用。

这是命名空间，嵌入HTML使用是不需要，独立做成 .svg 的要有才合法。

红影

马黑黑 发表于 2023-11-3 23:24
svg的出发点之一，就是制作可伸缩的矢量图形

慢慢感受到它的神奇了，可以是代码的

红影

马黑黑 发表于 2023-11-3 23:34
这是命名空间，嵌入HTML使用是不需要，独立做成 .svg 的要有才合法。

不管怎么说，想做成svg图片会记着这个的

马黑黑

红影 发表于 2023-11-4 10:36
慢慢感受到它的神奇了，可以是代码的

svg就是用标记性语言描述图形