心
本帖最后由 马黑黑 于 2024-10-8 13:32 编辑 <br /><br /><div id="svgwrap" style="text-align: center;"><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="heart" viewBox="0 0 100 100">
<path d="M50,25 C35,0,-14,25,20,60 L50,90 L80,60 C114,20,65,0,50,25" filter="url(#shadow)"></path>
<filter id="shadow">
<feDropShadow dx="2" dy="2" stdDeviation="4" flood-color="red" />
</filter>
</symbol>
</defs>
<use href="#heart" width="100%" height="100%" fill="pink" />
</svg>
</div>
<div class="hE"><pre id="pre"></pre></div>
<script>
pre.textContent = svgwrap.innerHTML;
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>
use实例化了心形symbol里的路径。可以在use标签中定制心形的尺寸，一楼取svg的100%宽高仅是为了演示。 use标签中能够定制心形的尺寸，真的是太厉害了。 问好老师，谢谢辛苦！ 漂亮的心形， 立体的，很不简单。。 花飞飞 发表于 2024-10-8 19:42
漂亮的心形， 立体的，很不简单。。
代码还是比较简单的 马黑黑 发表于 2024-10-8 20:52
代码还是比较简单的
设计和思路不简单。。
我把这个心形的路径放入今天的波浪贴子，也真是好看啊。。
stdDeviation="4"这个值是有雾化效果 花飞飞 发表于 2024-10-8 21:07
设计和思路不简单。。
我把这个心形的路径放入今天的波浪贴子，也真是好看啊。。
这个值控制模糊程度 漂亮的心形，对称的三次赛贝尔曲线加直线，就成了心形，再加上阴影，，，哦，这心形的颜色是阴影来的？ 红影 发表于 2024-10-8 22:20
漂亮的心形，对称的三次赛贝尔曲线加直线，就成了心形，再加上阴影，，，哦，这心形的颜色是阴影来的？
颜色是粉红，阴影是红 马黑黑 发表于 2024-10-8 22:25
颜色是粉红，阴影是红
是的，最后那句没注意，还以为是阴影带来的效果呢{:4_173:} 红影 发表于 2024-10-9 09:13
是的，最后那句没注意，还以为是阴影带来的效果呢
这个设计，阴影放在symbol标签里，是这一部分的阴影。path是symbol的一个组成部分，其实是唯一的实体部分。 马黑黑 发表于 2024-10-8 22:03
这个值控制模糊程度
这个比较好用的，跟PS里的羽化效果是重叠的。。 马黑黑 发表于 2024-10-9 12:13
这个设计，阴影放在symbol标签里，是这一部分的阴影。path是symbol的一个组成部分，其实是唯一的实体部分 ...
如果有别的实体，也能调用的吧。 红影 发表于 2024-10-9 20:41
如果有别的实体，也能调用的吧。
放在同一个 symbol 内 花飞飞 发表于 2024-10-9 19:18
这个比较好用的，跟PS里的羽化效果是重叠的。。
它们殊途同归 马黑黑 发表于 2024-10-9 20:51
放在同一个 symbol 内
嗯嗯，知道了{:4_187:} 红影 发表于 2024-10-9 21:16
嗯嗯，知道了
或者你可以单独给元素设置阴影。方法很多的。 马黑黑 发表于 2024-10-9 21:16
或者你可以单独给元素设置阴影。方法很多的。
单独设置的是专用的{:4_173:} 红影 发表于 2024-10-9 21:18
单独设置的是专用的
特殊场景特殊处理