extjs - 将 SVG 转换为 Ext.draw.Component 渐变

Question

假设我有一个 SVG 文件，并且我想将其设为 Ext.draw.Component，如何使我的 SVG 停止不透明度转换为 Ext.draw.Component 项？

例如，从SVG 文件中，我会有这样的东西：

<linearGradient ="linearGradient2920">
  <stop
     id="stop2922"
     style="stop-color:#000000;stop-opacity:1"
     offset="0" />
  <stop
     id="stop2924"
     style="stop-color:#000000;stop-opacity:0"
     offset="1" />
</linearGradient>

在Ext.draw.Component中会是什么样子？会这样翻译吗？

gradients: [{
            {
            id: 'linearGradient2920',
            angle: 100,
            stops: {
                0: {
                    color: '#000000',
                    opacity: 100 //<---Is this even valid??
                },
                100: {
                    color: '#000000',
                    opactiy: 0 //<---Is this even valid??
                }
            }
        }]

Answer 1

我刚刚在 SVG 的 Ext.js 的源代码中找到了这个 - http://docs.sencha.com/ext-js/4-1/source/Svg.html

for (i = 0; i < ln; i++) {
            stop = gradient.stops[i];
            stopEl = me.createSvgElement("stop");
            stopEl.setAttribute("offset", stop.offset + "%");
            stopEl.setAttribute("stop-color", stop.color);
            stopEl.setAttribute("stop-opacity",stop.opacity);
            gradientEl.appendChild(stopEl);
        }

注意stop.opacity。这似乎表明像在原始帖子中那样使用不透明度应该是有效的，但是我不确定它的比例是 1.0 还是 100。