制作一个在Android的xml中包含4个渐变的代码。

huangapple
go评论90阅读模式
英文:

making a 4 stop gradient in android's xml

问题

我尝试使用Inkscape的网格渐变，但在安卓上似乎不受支持，我需要类似这样的效果：

一个适用于安卓矩形（或任何其他形状，比如圆形）的4级渐变，基本上是渐变颜色的4个混合。在安卓中如何实现这个效果？或者至少通过安卓支持的方式（安卓是否支持Illustrator的SVG输出）？

英文:

I tried using inkscape's mesh gradient but it seems not supported in android, I need something like this:
制作一个在Android的xml中包含4个渐变的代码。

a 4 stop gradient for android's rectangle(or any other shape, like a circle), basically 4 blends of gradient color. How do I do this in android? Or atleast by something that android supports( is illustrator's svg output taken by android)?

答案1

得分: 2

你可以使用多个渐变来近似它。这只是一个快速尝试，以获得接近的效果。通过稍微调整，您可能能够做得更好。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-html -->
  4. <svg width="250" viewBox="0 0 100 100">
  5.   <defs>
  6.     <linearGradient id="grad1" x1="0" y1="1">
  7.       <stop offset="0" stop-color="rgb(149,254,149)"/>
  8.       <stop offset="1" stop-color="rgb(255,254,149)"/>
  9.     </linearGradient>
  11.     <radialGradient id="grad2" cx="0" cy="0" r="0.75">
  12.       <stop offset="0" stop-color="rgba(254,151,149, 1)"/>
  13.       <stop offset="1" stop-color="rgba(254,151,149, 0)"/>
  14.     </radialGradient>
  16.     <radialGradient id="grad3" cx="1" cy="1" r="0.75">
  17.       <stop offset="0" stop-color="rgba(149,150,202, 1)"/>
  18.       <stop offset="1" stop-color="rgba(149,150,202, 0)"/>
  19.     </radialGradient>
  20.   </defs>
  21.   
  22.   <rect width="100" height="100" fill="url(#grad1)"/>
  23.   <rect width="100" height="100" fill="url(#grad2)"/>
  24.   <rect width="100" height="100" fill="url(#grad3)"/>
  25. </svg>
  27. <!-- end snippet -->
英文:

You can approximate it using multiple gradients. This is just a quick attempt to get something close. You may be able to do better with a little extra tweaking.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;svg width=&quot;250&quot; viewBox=&quot;0 0 100 100&quot;&gt;
  2.   &lt;defs&gt;
  3.     &lt;linearGradient id=&quot;grad1&quot; x1=&quot;0&quot; y1=&quot;1&quot;&gt;
  4.       &lt;stop offset=&quot;0&quot; stop-color=&quot;rgb(149,254,149)&quot;/&gt;
  5.       &lt;stop offset=&quot;1&quot; stop-color=&quot;rgb(255,254,149)&quot;/&gt;
  6.     &lt;/linearGradient&gt;
  8.     &lt;radialGradient id=&quot;grad2&quot; cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;0.75&quot;&gt;
  9.       &lt;stop offset=&quot;0&quot; stop-color=&quot;rgba(254,151,149, 1)&quot;/&gt;
  10.       &lt;stop offset=&quot;1&quot; stop-color=&quot;rgba(254,151,149, 0)&quot;/&gt;
  11.     &lt;/radialGradient&gt;
  13.     &lt;radialGradient id=&quot;grad3&quot; cx=&quot;1&quot; cy=&quot;1&quot; r=&quot;0.75&quot;&gt;
  14.       &lt;stop offset=&quot;0&quot; stop-color=&quot;rgba(149,150,202, 1)&quot;/&gt;
  15.       &lt;stop offset=&quot;1&quot; stop-color=&quot;rgba(149,150,202, 0)&quot;/&gt;
  16.     &lt;/radialGradient&gt;
  17.   &lt;/defs&gt;
  18.   
  19.   &lt;rect width=&quot;100&quot; height=&quot;100&quot; fill=&quot;url(#grad1)&quot;/&gt;
  20.   &lt;rect width=&quot;100&quot; height=&quot;100&quot; fill=&quot;url(#grad2)&quot;/&gt;
  21.   &lt;rect width=&quot;100&quot; height=&quot;100&quot; fill=&quot;url(#grad3)&quot;/&gt;
  22. &lt;/svg&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年9月23日 20:02:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/64027517.html
  • android
  • java
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定