在 Android Studio 中导入 SVG 文件时渐变没有停止信息错误

Question

我正在尝试使用 Vector Asset 在 Android Studio 中上传从 Inkscape 导出的 SVG 文件，但不幸的是我遇到了以下错误：

ERROR @line 35: Gradient has no stop info

定义梯度的代码：

<defs
     id="defs11210">
    <linearGradient
       inkscape:collect="always"
       id="linearGradient11815">
      <stop
         style="stop-color:#69aeed;stop-opacity:1"
         offset="0"
         id="stop11811" />
      <stop
         style="stop-color:#66e6b2;stop-opacity:0.90909094"
         offset="1"
         id="stop11813" />
       --&gt;
    </linearGradient>
    <radialGradient <!-- LINE 35-->
       inkscape:collect="always"
       xlink:href="#linearGradient11815"
       id="radialGradient928"
       cx="99.615288"
       cy="233.88142"
       fx="99.615288"
       fy="233.88142"
       r="80.842598"
       gradientTransform="matrix(1,0,0,1.3440437,0,-80.46542)"
       gradientUnits="userSpaceOnUse" />
  </defs>

我猜 xlink:href="#linearGradient11815" 导致了问题，但我不明白为什么 Android Studio 无法识别参考中的停止信息。

提前致谢。

我按照 Moini 的建议更改了语法，但仍然无效：

<stop stop-color="#69aeed"
        stop-opacity="1"
        offset="0" />
<stop stop-color="#66e6b2"
        stop-opacity="0.90909094"
        offset="1" />

Answer 1

因为我怀疑问题出在 xlink:href="#linearGradient11815" 行。看起来 Android Studio 无法识别参考中的停止信息。因此，按以下方式重写它就足够了：

<defs
    id="defs11210">
    <radialGradient
       inkscape:collect="always"
       id="radialGradient11817"
       cx="29.611446"
       cy="168.14627"
       fx="29.611446"
       fy="168.14627"
       r="80.8426"
       gradientTransform="matrix(1.6670816,2.4672037,-1.1136432,0.75249749,172.27529,-58.475252)"
       gradientUnits="userSpaceOnUse">
       <stop
          style="stop-color:#69aeed;stop-opacity:1"
          offset="0"
          id="stop11811" />
       <stop
          style="stop-color:#66e6b2;stop-opacity:0.90909094"
          offset="1"
          id="stop11813" />
    </radialGradient>
  </defs>

基本上，停止标记应该嵌套在 radialGradient 或 linearGradient 中。

您还可以使用 Java 工具 github。com/14v/svg-non-stop。您需要先在您的机器上下载并安装 JDK。然后运行使用命令行的工具。

Linux 或 Mac 可以使用终端，例如

> cd /folder/to/svg-non-stop 
> ./svg-non-stop /my/full/path/to/your.svg

然后将以正确的格式输出另一个 svg 文件，然后您可以将其导入 Android Studio 的 Asset Vector。

Answer 2

就我而言，我弄清楚了为什么会发生这种情况。我有 2 个具有相同渐变颜色的形状例如：白色到蓝色在 svg 中，它只定义了一次这个渐变，而另一次则没有。这导致没有声明“停止”语句来填充第二个形状

=> 要解决此问题，只需将第二个形状更改为稍微不同的颜色（我将 RGB 增加了一个整数）

Answer 3

主要原因是属性 xlink:href 已弃用 MDN Web Docs。因此我猜它不再被 Android Studio 识别。

我个人导入了一个 svg 资产，它是通过文件 -> 导出 -> 导出为... -> SVG 从 Adobe Illustrator 导出的。从 Illustrator 导出的文件利用了此属性并导致了问题。

要解决这个问题，只需复制 xlink:href 引用调用者元素的所有缺失属性和子元素。

我的 svg 文件中的原始片段如下所示：

<linearGradient id="linear-gradient-23" x1="643.82" y1="401.79" x2="178.79" y2="-321.38" gradientUnits="userSpaceOnUse">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>
<linearGradient id="linear-gradient-24" x1="391.43" y1="437.67" x2="459.26" y2="298.96" xlink:href="#linear-gradient-23"/>
<linearGradient id="linear-gradient-25" x1="608.57" y1="440.97" x2="515.57" y2="257.5" xlink:href="#linear-gradient-23"/>
<linearGradient id="linear-gradient-26" x1="512" y1="551.86" x2="512" y2="-28.38" xlink:href="#linear-gradient-23"/>
<linearGradient id="linear-gradient-27" x1="381.42" y1="391.4" x2="478.72" y2="193.35" xlink:href="#linear-gradient-23"/>

我复制了属性 gradientUnits="userSpaceOnUse" 和子元素 <stop .. /> 从 "linear-gradient-23" 到每个引用它的元素：

<linearGradient id="linear-gradient-23" x1="643.82" y1="401.79" x2="178.79" y2="-321.38" gradientUnits="userSpaceOnUse">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>
<linearGradient id="linear-gradient-24" x1="391.43" y1="437.67" x2="459.26" y2="298.96" gradientUnits="userSpaceOnUse" xlink:href="#linear-gradient-23">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>
<linearGradient id="linear-gradient-25" x1="608.57" y1="440.97" x2="515.57" y2="257.5" gradientUnits="userSpaceOnUse" xlink:href="#linear-gradient-23">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>
<linearGradient id="linear-gradient-26" x1="512" y1="551.86" x2="512" y2="-28.38" gradientUnits="userSpaceOnUse" xlink:href="#linear-gradient-23">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>
<linearGradient id="linear-gradient-27" x1="381.42" y1="391.4" x2="478.72" y2="193.35" gradientUnits="userSpaceOnUse" xlink:href="#linear-gradient-23">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>

我建议使用像 VSCode 这样的现代文本编辑器来完成这项工作。另外，如果有人知道如何从 Illustrator 中导出资产而不会引起问题，请随时发表评论！

更新：如@mainactivity 所述，GitHub 上有一个用于此转换作业的自动脚本 github.com/14v/svg-non-stop

Answer 4

我运行遇到了同样的问题，但我没有手动编辑 XML 文件，而是运行通过这个： https://www.svgminify.com/

Answer 5

这个网站刚刚救了我：https://svg2vector.com/ 导入您的 .svg 并生成 xml 代码

Answer 6

它帮助我 re-save Inkscape 中的 SVG 文件 > 另存为.. > 另存为类型：优化的 SVG (*.svg).

我的 SVG 非常简单，所以可能不适合所有人。

在 Android Studio 中导入 SVG 文件时渐变没有停止信息错误

Gradient has no stop info error while importing SVG file in Android Studio

svg

inkscape

android-studio