我有一个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
答案 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>