在移动设备上调整 SVG 大小

Posted

技术标签:

【中文标题】在移动设备上调整 SVG 大小【英文标题】:Resize SVG on Mobile 【发布时间】:2016-02-21 05:37:45 【问题描述】:

如何调整 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- 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>

【问题讨论】:

【参考方案1】:

为了通过 img 元素进行缩放,SVG 图像需要在其中设置其宽度、高度和 viewBox 属性。看起来是这样的:

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

在设置宽度、高度和 viewBox 属性时,您告诉浏览器要绘制虚拟画布的哪个部分。视图框告诉虚拟画布的左上角和右下角。因此,如果图像被缩放到比这更大的尺寸,整个图像会被放大,而不是仅仅让虚拟画布变大(导致图像中 SVG 形状旁边的空白区域)。

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

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

不要使用 img 元素的 width 和 height 属性。它不会产生预期的效果。浏览器对这些属性的处理与相应的 CSS 属性不同。

更准确地说,这是正确的方法:

<img src="/svg/circle-element-1.jsp" style="width: 32px;">

【讨论】:

【参考方案2】:

&lt;img&gt; 标签内使用您的 SVG,例如:

<img src="my_SVG_file.svg"  />

然后您可以使用标准 CSS 来影响 &lt;img&gt; 标签并使其具有移动响应性。

img 
   max-width: 100%;

CODEPEN DEMO

【讨论】:

&lt;img&gt; 标签加载 svg 将禁用此 svg 上的所有脚本或外部 CSS 样式。 Op 的代码似乎与现在没有任何相似之处,但通常需要将 inline svg 保持为 inline svg... 这似乎没有为我调整大小。是否可以在我的 CSS 中的某个断点处调整它的大小? 我用您的@media query 更新了笔以显示它正在工作。

以上是关于在移动设备上调整 SVG 大小的主要内容,如果未能解决你的问题,请参考以下文章

如何在移动设备上调整灵活文本区域的大小?

css 在移动设备上调整字体大小

网格系统无法在移动设备或小屏幕上正确调整大小

调整图像大小以在移动或小型设备上查看

如何调整图片的大小以方便移动设备?

CSS / Bootstrap - 字体大小未正确从计算机调整到移动设备:移动设备上的字体看起来很小