在 ExtJS Classic 7.3.0 中创建动画检查标记。需要帮助移除我的复选标记周围的容器边框

Question

我试图在我的所有组件顶部显示复选标记。它显示出来了，但是我的复选标记周围有一个容器框架，我不知道如何删除它。这是工作 fiddle：Sencha Fiddle。点击提交按钮，你会看到它当前的样子。

也包括这里的代码：

    var checkMarkTemplate = new Ext.XTemplate(
      '<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">',
      '<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>',
      '<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>',
    );

    Ext.create('Ext.Component', {
        floating: true,
        // modal: true,
        id: 'check',
        renderTpl: checkMarkTemplate,
        frame: false,
        border: false,
        bodyStyle: 'background:transparent',
        x: 100,
        y: 100,
        listeners: {
            show: function(comp) {
                //
            }
        }
    });

Answer 1

尝试在上面的 Ext.create('Ext.Component', {

中添加 shadow:false,

这对我有用。

在 ExtJS Classic 7.3.0 中创建动画检查标记。需要帮助移除我的复选标记周围的容器边框

Creating an animated checkmard in ExtJS Classic 7.3.0. Need help removing the container border around my check mark

javascript

css

animation

svg

extjs