Question

假设我有一个SVG文件，我想把它变成一个Ext.draw.Component，如何让我的SVG stop-opacity转换为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的范围内。

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

1 个答案: