在移动设备上调整 SVG 的大小

Question

如何调整 SVG 徽标的大小以在移动设备上响应？

这是我的 Fiddle，我的代码如下：

body {
    background:black;
}

@media screen and (max-width: 500px) {
    svg {
        width:50%;
    }
}

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg version="1.1" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  <title>Logo</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Your-Score" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="Desktop-Your-Score" sketch:type="MSLayerGroup" transform="translate(-23.000000, -24.000000)" font-weight="normal" font-family="Gill Sans" letter-spacing="1.16666663" font-size="28" sketch:alignment="middle" fill="#FFFFFF">
      <g id="Header" sketch:type="MSTextLayer">
        <g id="Primary-Nav-[home]-Copy">
          <g id="Logo" transform="translate(23.000000, 18.000000)">
            <text id="TOMORROW’S">
              <tspan x="0.0328778028" y="27">TOMORROW’S</tspan>
              <tspan x="36.2975262" y="58">SCORE</tspan>
            </text>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

Answer 1

在 <img> 标签内使用您的 SVG，例如：

<img src="my_SVG_file.svg" alt="" />

然后您可以使用标准 CSS 来影响 <img> 标签并使其响应移动设备。

img {
   max-width: 100%;
}

CODEPEN DEMO

Answer 2

为了通过 img 元素进行缩放，SVG 图像需要在其中设置其宽度、高度和 viewBox 属性。这是它的样子：

<svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="70px" height="70px" viewBox="0 0 70 70">
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>

设置宽度、高度和 viewBox 属性时，您告诉浏览器要绘制虚拟 canvas 的哪一部分。视图框告诉虚拟的左上角和右下角canvas。因此，如果图像被缩放到比该尺寸更大的尺寸，则整个图像都会被放大，而不是仅仅使虚拟 canvas 变大（导致图像中 SVG 形状旁边的白色 space ).

如需更多说明，请搜索与 SVG 相关的 viewBox 属性。

始终通过 CSS 属性设置图像宽度

不要使用 img 元素的宽度和高度属性。它不会产生预期的效果。浏览器对待这些属性的方式与对应的 CSS 属性不同。

在移动设备上调整 SVG 的大小

Resize SVG on Mobile

html

css

svg

responsive-design

responsiveness