SVG描边问题

SVG单独设置内描边或外描边的属性是什么？
我不想让它从路径的中间往两边扩散，这样不好计算

人生的起源 2020-02-26

源自：项目：Canvas 实现手势解锁 2-6 作业题

收起

3回答

好帮手慕慕子回答被采纳获得+3积分 2020-02-26 21:22:58

同学你好，老师查阅资料，暂未找到svg有关内描边和外描边的直接属性设置。不过同学可以结合stroke属性设置样式，实现效果。

示例：

1、实现内描边的效果

<svg width="100" height="100" style="border: 1px solid #333">
<rect class="rectangle" width="100" height="100" fill="#fff" style="stroke:pink; stroke-width:10px;" />
</svg>

效果图如下：

2.实现外描边的效果

<svg width="100" height="100" style="border: 10px solid pink">
<rect class="rectangle" width="100" height="100" fill="#fff" style="stroke:black; stroke-width:1px;" />
</svg>

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者人生的起源 2020-02-26 20:47:17

如上图①所示，SVG默认的描边方式是居中描边，从路径的中间向两边扩展
我现在想实现如图②和图③的方式，一个是内描边，一个是外描边，该用什么属性来设置？
我只要这两个属性，不要其它的，谢谢！

收起回答

提问者人生的起源 #1

在Photoshop中就有外描边和内描边的选项，SVG里面有没有这样的属性可以直接设置？

2020-02-26 20:50:32

好帮手慕慕子 2020-02-26 20:11:35

同学你好，可以使用stroke相关的属性，设置外描边样式，示例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

</head>

<body>

<svg width="500" height="400">
<rect x="10" y="10" width="300" height="150" style="fill:#ccc; stroke:orange; stroke-width:5px;" /> 
<rect x="10" y="210" rx="50" ry="100" width="300" height="150" style="fill:#ccc; stroke:orange; stroke-width:5px; stroke-opacity:.5; fill-opacity:.9;" />
</svg>
</body>

</html>

具体的属性，可以参考菜鸟教程上的讲解示例：https://www.runoob.com/svg/svg-stroke.html

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答