JS媒体查询不适用于SVG元素

时间:2019-07-15 11:59:05

标签: javascript html css svg

我有一个SVG元素,我试图在JS中进行媒体查询。某种程度上,查询无法正常工作,因为在所有大小的浏览器中都能看到样式的变化。我使用JS查询而不是CSS,因为CSS不允许我抓住“ dx” svg属性。需要很多帮助。预先感谢。

HTML

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

CSS

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

JS

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

1 个答案:

答案 0 :(得分:1)

我已经向您的函数添加了else。另外,由于JavaScript中没有onclick="grow()",因此我也删除了grow()。 SVG元素具有sanitise属性。

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

svg{border:1px solid #333}

#textnew {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 2em;
  text-align: center;
}
<svg viewBox="40 0 370 40">
<text id="textnew" transform-orgin="center" dx="40%" dy="80%" fill="white">This
  is my story.</text> 
</svg>