CSS媒体查询和SVG

Question

在调整浏览器窗口大小后，我正在尝试更改SVG元素的“填充”。我已尝试过其他值，例如“visibility：hidden;”而元素实际上隐藏了。但是它似乎没有响应尝试更改填充。看看代码。有什么想法吗？

SVG：

<svg>
<rect class="d" x="150" y="150" width="500" height="350"
    rx="40" ry="40"
    style="fill: blue;
           fill-opacity: .7;"/>

</svg>

CSS

@media screen and (max-width: 451px){
.d {
fill: red;
  }  
}

Answer 1

我的猜测是style覆盖了class。尝试将班级d设置为您在style标记中设置的原始值，然后删除该样式标记。

Answer 2

内联样式优先级高于类。所以你应该在普通类和媒体查询中设置样式。