时间戳

首页 > 解决方案 > 将媒体查询规则直接添加到 SVG 路径、多边形或矩形

html - 将媒体查询规则直接添加到 SVG 路径、多边形或矩形

问题描述

我有这个 SVG，它正在通过添加为图像CSS，但我想在较小的屏幕上隐藏它的一部分。SVG如果将其本身直接添加到 中，这将不是问题HTML，但由于我只有这种方式，所以该类不起作用。

甚至可以media query直接将path, polygon, rect直接添加到 SVG 本身，还是有其他方法可以做到这一点？

SVG 已作为背景图像添加到 :before 元素中。

所以像这样的事情......

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
  <polygon style="@media(max-width: 992px) {display: none}" points="150,10 40,108 190,78 10,78 160,198" style="fill:blue;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>

标签： htmlcsssvgvectormedia-queries

解决方案

编辑：我似乎找到了一个部分解决方案：可以<style>在 SVG 中添加一个标签，并在其中应用 .class 样式......

但它似乎只有当 SVG 是页面上唯一的元素时才有效，而不是在其他元素中......

<svg>
   <style type="text/css">
      @media screen and (max-width: 992px) {
          .class {
             display: none;
          }
       }
   </style>
</svg>

推荐阅读