Javascript 无法获取click事件侦听器以处理svg元素

我有一个svg文本元素。我在文本上实现了onclick事件，因此每次单击文本时，它都会变大。不知怎么的，它不起作用

CSS:

HTML:

JS:

---

您将css动画直接应用于元素，并且单击功能正常工作，因为文本正在更改为Works

这是解决办法

函数增长{ e、 类列表。添加“text1”； } html， 身体{ 身高：100%； 保证金：0； } .集装箱{ 背景颜色：黄色； z指数：7； 身高：100%； 宽度：100%； 位置：绝对位置； 不透明度：.5； } .文本框{ 背景颜色：蓝色； 位置：绝对位置； 底部：10px； 左：0px； 右：0px； } .text1{ 动画名称：钻石起源； 动画持续时间：8秒； 动画填充模式：正向； } @钻石原点关键帧{ 从{ 变换：scale1； } 到{ 变换：缩放300； } } fljsfa

我喜欢SVG

 <style>
            html,
            body {
                height: 100%;
                margin: 0;
            }

            .container {
                background-color: yellow;
                z-index: 7;
                height: 100%;
                width: 100%;
                position: absolute;
                opacity: .5;
            }

            .textBox {
                background-color: blue;
                position: absolute;
                bottom: 10px;
                left: 0px;
                right: 0px;
            }

            #text1 {
                animation-name: diamondOrigin;
                animation-duration: 8s;
                animation-fill-mode: forwards;
            }

            @keyframes diamondOrigin {
                from {
                    transform: scale(1);
                }

                to {
                    transform: scale(300);
                }
            }
 </style>

    <div class="textBox">
        <p>fljsfa</p>
    </div>

    <div class="container">
        <svg height="100%" width="100%">    
              <text id="text1" onclick="grow()" x="0" y="10" fill="red">I love SVG</text>
        </svg>
    </div>

 <script>
       function grow() {
                    var changeText = document.getElementById("text1");
                    var compStyles = window.getComputedStyle(changeText);
                    changeText.textContent = 'Works?';
                }
        grow();
 </script>