马黑黑 发表于 2024-9-26 20:22

svg五星红旗

<div class="hE"><pre id="svgcode">
&lt;svg width="240" height="160" viewBox="0 0 960 640" stroke="none" fill="yellow" xmlns="http://www.w3.org/2000/svg"&gt;
        &lt;rect x="0" y="0" width="960" height="640" fill="red"/&gt;
        &lt;path d="M160,79 L112.3894,225.5304 L237.0356,134.9696 L82.9644,134.9696 L207.6106,225.5304Z"/&gt;
        &lt;path d="M292.5602,80.4639 L351.8765,66.8091 L295.8626,42.9908 L327.1787,95.1844 L332.522,34.5518Z"/&gt;
        &lt;path d="M352.3216,132.5255 L406.9683,105.7187 L378.5148,159.5264 L369.9069,99.2705 L412.2884,142.9589Z"/&gt;
        &lt;path d="M353.2312,215.2089 L403.7252,249.1976 L382.8547,192.0206 L366.1311,250.5462 L414.0597,213.0267Z"/&gt;
        &lt;path d="M295.0122,268.0098 L351.9655,289.485 L293.2665,305.5875 L331.2902,258.0579 L328.4656,318.8599Z"/&gt;
&lt;/svg&gt;
</pre></div>
<h2>效果：</h2>
<div id="stage" style="margin: 20px; text-align: center;"></style>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/helight/helight.js';
document.body.appendChild(sc);
stage.innerHTML = svgcode.innerText;
</script>

马黑黑 发表于 2024-9-26 20:24

代码svg已经声明了命名空间，可以直接存为 .svg 文档当图片使用。

图片的尺寸按宽高 3:2 的比例使用

红影 发表于 2024-9-26 21:04

一个个画出的五角星呢，这svg五星红旗真漂亮{:4_187:}

红影 发表于 2024-9-26 21:06

做国庆帖子这个正好能用上呢{:4_173:}

马黑黑 发表于 2024-9-26 21:36

红影 发表于 2024-9-26 21:06
做国庆帖子这个正好能用上呢

这个是很标准的，一切按国旗的比例来做

马黑黑 发表于 2024-9-26 21:37

红影 发表于 2024-9-26 21:04
一个个画出的五角星呢，这svg五星红旗真漂亮

我曾用CSS+HTML做过，也是严格按照比例做的

花飞飞 发表于 2024-9-26 23:00

马黑黑 发表于 2024-9-26 20:24
代码svg已经声明了命名空间，可以直接存为 .svg 文档当图片使用。

图片的尺寸按宽高 3:2 的比例使用

xmlns="http://www.w3.org/2000/svg
这个就是声明的命名空间么。。
如你所说，它的确之前有出现过。。在锯片那贴子里印象最深。别的也有。。

红影 发表于 2024-9-26 23:05

马黑黑 发表于 2024-9-26 21:36
这个是很标准的，一切按国旗的比例来做

厉害{:4_199:}

马黑黑 发表于 2024-9-26 23:06

花飞飞 发表于 2024-9-26 23:00
xmlns="http://www.w3.org/2000/svg
这个就是声明的命名空间么。。
如你所说，它的确之前有出现过。。 ...

一般会存在两个命名空间，现在这个是必须的，如果svg还有 href 之类的指令，还需要 xmlns:xlink 命名空间，一点错都不允许

红影 发表于 2024-9-26 23:06

马黑黑 发表于 2024-9-26 21:37
我曾用CSS+HTML做过，也是严格按照比例做的

这个应该严格按照比例，是对国旗的尊重呢{:4_187:}

马黑黑 发表于 2024-9-26 23:07

红影 发表于 2024-9-26 23:06
这个应该严格按照比例，是对国旗的尊重呢

这个是必须的，所以五个五角星都是绘制在特定比例的位置上的

花飞飞 发表于 2024-9-26 23:11

马黑黑 发表于 2024-9-26 23:06
一般会存在两个命名空间，现在这个是必须的，如果svg还有 href 之类的指令，还需要 xmlns:xlink 命名空间 ...

锯片那个贴子就有两个。。原来 这么严格

马黑黑 发表于 2024-9-26 23:13

花飞飞 发表于 2024-9-26 23:11
锯片那个贴子就有两个。。原来 这么严格

svg就是比较严格的，所以一般不会手动写代码，都是用软件像作图那样操作，然后生成文档，所以也会存在很多废码或无用的代码

红影 发表于 2024-9-26 23:18

马黑黑 发表于 2024-9-26 23:07
这个是必须的，所以五个五角星都是绘制在特定比例的位置上的

黑黑做得对，很赞{:4_187:}

花飞飞 发表于 2024-9-27 20:49

马黑黑 发表于 2024-9-26 23:13
svg就是比较严格的，所以一般不会手动写代码，都是用软件像作图那样操作，然后生成文档，所以也会存在很 ...

明白了。。。软件操作后生成~~其实之前用过的，不过都是静态的。

马黑黑 发表于 2024-9-27 22:08

花飞飞 发表于 2024-9-27 20:49
明白了。。。软件操作后生成~~其实之前用过的，不过都是静态的。

这个，PS生成路径代码的功能，非常好用。当然，要制作复杂的svg，可能需要基于svg的专业软件

花飞飞 发表于 2024-9-27 22:20

马黑黑 发表于 2024-9-27 22:08
这个，PS生成路径代码的功能，非常好用。当然，要制作复杂的svg，可能需要基于svg的专业软件

PS。。。我不会用路径。{:4_198:}啊。。。

马黑黑 发表于 2024-9-27 22:35

花飞飞 发表于 2024-9-27 22:20
PS。。。我不会用路径。啊。。。

查一下资料，绿婆婆好像会了

花飞飞 发表于 2024-9-27 22:45

马黑黑 发表于 2024-9-27 22:35
查一下资料，绿婆婆好像会了

那太好了，等过节吧{:4_170:}

马黑黑 发表于 2024-9-28 10:30

花飞飞 发表于 2024-9-27 22:45
那太好了，等过节吧

{:4_187:}
页: [1] 2
查看完整版本: svg五星红旗