Javascript JS媒体查询在svg元素上不起作用

我有一个SVG元素，我正试图在JS中查询它。不知何故，查询不起作用，因为在浏览器的所有大小中都可以看到样式的更改。我使用jsquery而不是css，因为css不允许我获取“dx”svg属性。需要很多帮助。提前谢谢

HTML

JS

---

我已在您的函数中添加了一个

else

。我还删除了

onclick=“grow（）”

，因为javascript中没有

grow（）

。SVG元素有一个属性

函数myFunction（x）{
if（x.matches）{//if媒体查询匹配
var mobileText=document.getElementById（“textnew”）
mobileText.setAttribute（“dx”，120）；
mobileText.style.fill=“红色”；
}否则{
textnew.style.fill=“白色”；
textnew.setAttribute（“dx”，48）；
}
}
var x=window.matchMedia（（最大宽度：5.5英寸）
myFunction（x）//在运行时调用侦听器函数
x、 addListener（myFunction）//在s上附加侦听器函数

body{背景：黑色}
svg{border:1px solid#333}
#文本新{
字体系列：“蒙特塞拉特”，无衬线；
字号：500；
字号：2em；
文本对齐：居中；
}

这
这是我的故事。

谢谢你的片段。我发现了我的错误。代码可以在没有“var mobileText=document.getElementById（“textnew”）”的情况下工作，尽管我将元素设置为var mobileText。该代码仅在我使用“textnew.”时有效。你知道这是为什么吗？

<text id="textnew" transform-orgin="center" onclick="grow()" dx="40%" dy="80%" fill="white">This
                is my story.</text>

#textnew {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 2em;
  text-align: center;
}

function myFunction(x) {
      if (x.matches) { // If media query matches
        var mobileText = document.getElementById("textnew")
        mobileText.setAttribute("dx", 120);
        mobileText.style.fill = "red";
      }
    }
    var x = window.matchMedia("(max-width: 5.5in)")
    myFunction(x) // Call listener function at run time
    x.addListener(myFunction) // Attach listener function on s