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

【问题标题】：Gradient has no stop info error while importing SVG file in Android Studio在 Android Studio 中导入 SVG 文件时，渐变没有停止信息错误
【发布时间】：2019-12-17 06:05:27
【问题描述】：

我正在尝试使用 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" />

【问题讨论】：

我怀疑 Android Studio 需要这种语法而不是 CSS 样式渐变：developer.mozilla.org/en-US/docs/Web/SVG/Element/stop
我更新了stop-color 的代码，但它仍然不起作用。你能看一下吗？
对不起，我实际上不是这里的专家，因此只是评论。我会尝试替换 xlink 的东西，我还会检查第 35 行（或现在可能的另一行）实际包含的内容。

标签： android-studio svg inkscape

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

对我来说，原来的 sn-p 是这样的：

<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 .. /> from "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

【讨论】：

你发现了吗？
@rickey-levi 如果你的意思是如何从 Illustrate 导出完美的 svg，不。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我怀疑问题出在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>

【讨论】：

优秀的演绎伙伴
@Serge 如何以及在哪里使用它？
@Jetwiz 转到 github 页面，单击二进制文件的链接，下载并解压缩它们，打开终端窗口并导航到目录 svg-non-stop-1.x.x。然后按照 github 页面上的说明使用命令./bin/svg-non-stop /full/path/to/my_vector_drawable.svg。我只在 Linux 机器上进行了测试，但对我来说它完美无缺，并在原版旁边生成了一个新的 svg，并且完美地应用了修复！
github.com/14v/svg-non-stop 自动执行此算法