论坛 › 马黑黑教程专版 › svg文档当图片使用演示

马黑黑 发表于 2023-11-3 13:32

svg文档当图片使用演示

<style>
        #mydiv { margin: 20px auto; width: 600px; height: 600px; text-align: center; }
        .flex { display: flex; align-items: center; justify-content: center; gap:8px; }
</style>

<div id="mydiv">
        <img id="mypic" alt="" src="https://638183.freep.cn/638183/web/svg/sunfl-1.svg" width="300" height="300" />
</div>

<p class="flex">
        <label for="rng">调整图片宽高尺寸</label>
        <input id="rng" type="range" min="30" max="600" value="300" step="10" />
        <output id="rngMsg">width="300" height="300"</output>
</p>

<script>
rng.oninput = () => {
        rngMsg.innerText = 'width="' + rng.value + '" height="' + rng.value + '"';
        mypic.setAttribute('width',rng.value);
        mypic.setAttribute('height',rng.value);
};
</script>

马黑黑 发表于 2023-11-3 13:32

一楼完整代码

<style>
        #mydiv { margin: 20px auto; width: 600px; height: 600px; text-align: center; }
        .flex { display: flex; align-items: center; justify-content: center; gap:8px; }
</style>

<div id="mydiv">
        <img id="mypic" alt="" src="https://638183.freep.cn/638183/web/svg/sunfl-1.svg" width="300" height="300" />
</div>

<p class="flex">
        <label for="rng">调整图片宽高尺寸</label>
        <input id="rng" type="range" min="30" max="600" value="300" step="10" />
        <output id="rngMsg">width="300" height="300"</output>
</p>

<script>
rng.oninput = () => {
        rngMsg.innerText = 'width="' + rng.value + '" height="' + rng.value + '"';
        mypic.setAttribute('width',rng.value);
        mypic.setAttribute('height',rng.value);
};
</script>

马黑黑 发表于 2023-11-3 13:34

sunfl-1.svg 文件完整代码：
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="sunflower" width="100%" height="100%" viewBox="0 0 300 300">
            <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" />
      </pattern>
    </defs>

    <circle cx="200" cy="200" r="200" fill="url(#sunflower)" />
</svg>

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

说明：

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

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

马黑黑 发表于 2023-11-3 13:38

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

亦是金 发表于 2023-11-3 14:13

本帖最后由 亦是金 于 2023-11-3 14:15 编辑

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

红影 发表于 2023-11-3 14:47

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

红影 发表于 2023-11-3 14:52

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

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


嗯嗯，记下了{:4_204:}

红影 发表于 2023-11-3 14:53

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

没看懂，这张原始图片的宽高应该是400*400 啊{:4_203:}

马黑黑 发表于 2023-11-3 21:30

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

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

马黑黑 发表于 2023-11-3 21:30

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

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

马黑黑 发表于 2023-11-3 21:31

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

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

红影 发表于 2023-11-3 22:53

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

耶，看样子我通过考试了{:4_205:}

红影 发表于 2023-11-3 22:54

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

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

红影 发表于 2023-11-3 22:55

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

是的，特别神奇{:4_204:}

马黑黑 发表于 2023-11-3 23:24

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

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

马黑黑 发表于 2023-11-3 23:34

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

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

红影 发表于 2023-11-4 10:36

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

慢慢感受到它的神奇了，可以是代码的{:4_173:}

红影 发表于 2023-11-4 10:37

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

不管怎么说，想做成svg图片会记着这个的{:4_204:}

马黑黑 发表于 2023-11-4 10:52

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

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

查看完整版本: svg文档当图片使用演示