用渐变（或纯色）填充特定的可绘制矢量

Posted 2023-03-28

【中文标题】用渐变（或纯色）填充特定的可绘制矢量

【英文标题】：Fill a particular vector drawable with a gradient (or a solid color)

【发布时间】：2021-10-28 13:33:44

【问题描述】：

好的，所以我有一个矢量可绘制对象，它是由paths 组合而成的不规则形状，我需要填充背景。现在，我该怎么做呢？

例如，由四个路径组成的简单正方形

108 x 108 画布：-

<path 
      android:pathData="M10,10 98, 10"/>


<path 
      android:pathData="M98,10 98, 98"/>

<path 
      android:pathData="M98,98 10, 98"/>

<path 
      android:pathData="M10,98 10, 10"/>

现在我该如何填充这个形状？

谢谢

PS：如果有替代方案，我可以使用 jetpack compose 以声明方式执行此操作。

PPS：请注意，这只是一个例子，而我的实际形状是高度不对称的（几何上），大约由 10 个paths 组成

【问题讨论】：

你说的是fill还是stroke。如果填充，路径之间的区域是否应该被填充？

这正是我想要的。

色调怎么样？

【参考方案1】：

我认为您唯一的选择是将不同的路径合并为一个。在这里我已经完成了，删除了“M”并在最后添加了一个“z”。

svg>path 
  stroke: navy;
  stroke-width: 2;

<svg viewBox="0 0 100 100"  >
  <path d="M10,10 98, 10"/>
  <path d="M98,10 98, 98"/>
  <path d="M98,98 10, 98"/>
  <path d="M10,98 10, 10"/>
</svg>

<svg viewBox="0 0 100 100"  >
  <defs>
    <linearGradient id="g1">
      <stop offset="0%"   stop-color="purple" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
  </defs>
  <path d="M10,10 98,10 98,10 98,98 98,98 10,98 10,98 10,10 z" fill="url(#g1)"/>
</svg>

【讨论】：

如果在路径起点（“M x,y”）和几个点之后没有指令，默认使用什么-“L”？我的意思是直线的绝对坐标？

@Leonid 我想是的。在d - SVG: Scalable Vector Graphics | MDN 上说：“任何后续坐标对都被解释为隐式绝对 LineTo (L) 命令的参数”。