Question

当我想为不同的屏幕类型加载图片（png或jpg格式）时，我使用图片标记并描述来源：

 <picture>
      <source media="(min-width: 960px)"
              srcset="img/photo-drumset-desktop@1x.jpg 1x, img/photo-drumset-desktop@2x.jpg 2x"
              alt="Фотография пользователя">
      <source media="(min-width: 660px)"
              srcset="img/photo-drumset-tablet@1x.jpg 1x, img/photo-drumset-tablet@2x.jpg 2x"
              alt="Фотография пользователя">
      <img src="img/photo-drumset-mobile.jpg"
            srcset="img/photo-drumset-mobile.jpg 1x, img/photo-drumset-mobile@2x.jpg 2x"
            alt="Фотография пользователя из социальной сети">
    </picture>

有什么更好的方法将它用于svg标签（然后使用fill和其他css属性）？（没有js）

Answer 1

这取决于您是否需要/将使用：

内联SVG

或

SVG作为图片（ ex： <img src="someimage.svg" alt="svg" />）

如果您希望/将SVG用作img，那么您现在可以使用picture进行操作。

否则你将不得不使用CSS媒体查询，如下所示：

/*demo purposes */
body {
  margin: 0;
  overflow: hidden
}

svg {
  width: 100vw;
  height: 100vh;
}
/* end demo purposes */

.mobile {
  background: red
}

.desktop {
  display: none
}

@media (min-width:1024px) {
  .desktop {
    background: green;
    display: block
  }
  .mobile {
    display: none
  }
}

<svg class="desktop">
 <!-- svg code -->
</svg>
<svg class="mobile">
 <!-- svg code -->
</svg>

Answer 2

您可以在SVG（reference）中使用<foreignObject>标签：

<svg>
 <foreignObject x="0" y="0" width="100%" height="100%">
   <picture>
      <source media="(min-width: 960px)"
              srcset="img/photo-drumset-desktop@1x.jpg 1x, img/photo-drumset-desktop@2x.jpg 2x"
              alt="Фотография пользователя">
      <source media="(min-width: 660px)"
              srcset="img/photo-drumset-tablet@1x.jpg 1x, img/photo-drumset-tablet@2x.jpg 2x"
              alt="Фотография пользователя">
      <img src="img/photo-drumset-mobile.jpg"
            srcset="img/photo-drumset-mobile.jpg 1x, img/photo-drumset-mobile@2x.jpg 2x"
            alt="Фотография пользователя из социальной сети">
    </picture>
  </foreignObject>
</svg>

使用svg类型的图片标签

2 个答案: