svg - SVG 路径“填充”的颜色超出预期
问题描述
我有一个定义为 SVG 路径的形状,我想用纯色填充它。路径本身看起来是正确的,并且stroke
遵循我想要的形状。但是,当我将fill
属性从更改none
为颜色时,颜色会溢出我定义的曲线并创建一个矩形形状和一个斑点。
在这些示例中,我使用内联 SVGstyle
属性,但使用 CSS 样式填充<path>
.
<p>Path with stroke looks correct:</p>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:none;stroke-width:0.3;stroke:#000"
d="m47.6 69.5c0 22.9 0 45.9 0 68.8 37 0 74.1 0 111.1 0 0-22.9 0-45.9 0-68.8m-111.1 0c7.5-9.2 17.7-17.8 30-18.8 11.1-0.8 20.6 7.2 26.4 15.9 5.6 9 12.6 18.9 23.6 21.3 11.1 2.1 21-5.6 27.7-13.7 1.3-1.5 2.5-3.1 3.5-4.7"/>
</svg>
<p>But 'fill' covers more than it should:</p>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:blue;stroke-width:0.3;stroke:#000"
d="m47.6 69.5c0 22.9 0 45.9 0 68.8 37 0 74.1 0 111.1 0 0-22.9 0-45.9 0-68.8m-111.1 0c7.5-9.2 17.7-17.8 30-18.8 11.1-0.8 20.6 7.2 26.4 15.9 5.6 9 12.6 18.9 23.6 21.3 11.1 2.1 21-5.6 27.7-13.7 1.3-1.5 2.5-3.1 3.5-4.7"/>
</svg>
我该如何解决这个问题并使填充颜色跟随形状顶部的曲线?
解决方案
这是您编写路径的方式。如果您查看d
属性m
,则中间有一个命令(移动到)。这意味着您没有连续编码路径。我会这样做:
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:red;stroke-width:0.3;stroke:#000"
d="M47.6,69.5
C55.1,60.3,65.3,51.7,77.6,50.7
C88.7,49.9,98.2,57.9,104,66.6
C109.6,75.6,116.6,85.5,127.6,87.9
C138.7,90,148.6,82.3,155.3,74.2
C156.6,72.7,157.8,71.1,158.8,69.5
V138.3H47.6z"/>
</svg>
推荐阅读
- c# - 命名空间“OpenTap.Plugins”中不存在类型或命名空间名称“BasicSteps”
- ios - 在我的 iOS 应用程序中实施 pod 'Firebase/Firestore' 后无法运行应用程序
- xamarin.forms - 如何让 Xamarin 表单中的数字条目等到用户完成输入数字
- javascript - 为什么我的引导模式组件没有显示在另一个 Vue 组件中
- xamarin - Xamarin.Forms 具有多个值的 MicroCharts 条形图
- blazor - 如何从 blazor 中的父组件调用子组件方法?
- java - CSVRecordReader 和 CSV 行末尾的未终止引用字段
- javascript - 递归循环遍历节点树并检查节点是否存在,如果不存在,则使用回调或承诺创建它
- mysql - 如何使表反应性更新
- python - 使用 pytest 进行测试时如何使用夹具正确清除数据库