英文:
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:
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
你可以使用多个渐变来近似它。这只是一个快速尝试，以获得接近的效果。通过稍微调整，您可能能够做得更好。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg width="250" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="0" y1="1">
<stop offset="0" stop-color="rgb(149,254,149)"/>
<stop offset="1" stop-color="rgb(255,254,149)"/>
</linearGradient>
<radialGradient id="grad2" cx="0" cy="0" r="0.75">
<stop offset="0" stop-color="rgba(254,151,149, 1)"/>
<stop offset="1" stop-color="rgba(254,151,149, 0)"/>
</radialGradient>
<radialGradient id="grad3" cx="1" cy="1" r="0.75">
<stop offset="0" stop-color="rgba(149,150,202, 1)"/>
<stop offset="1" stop-color="rgba(149,150,202, 0)"/>
</radialGradient>
</defs>
<rect width="100" height="100" fill="url(#grad1)"/>
<rect width="100" height="100" fill="url(#grad2)"/>
<rect width="100" height="100" fill="url(#grad3)"/>
</svg>
<!-- 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 -->
<svg width="250" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="0" y1="1">
<stop offset="0" stop-color="rgb(149,254,149)"/>
<stop offset="1" stop-color="rgb(255,254,149)"/>
</linearGradient>
<radialGradient id="grad2" cx="0" cy="0" r="0.75">
<stop offset="0" stop-color="rgba(254,151,149, 1)"/>
<stop offset="1" stop-color="rgba(254,151,149, 0)"/>
</radialGradient>
<radialGradient id="grad3" cx="1" cy="1" r="0.75">
<stop offset="0" stop-color="rgba(149,150,202, 1)"/>
<stop offset="1" stop-color="rgba(149,150,202, 0)"/>
</radialGradient>
</defs>
<rect width="100" height="100" fill="url(#grad1)"/>
<rect width="100" height="100" fill="url(#grad2)"/>
<rect width="100" height="100" fill="url(#grad3)"/>
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论