使 SVG 响应式缩放答案

【问题标题】：Making SVGs scale responsively使 SVG 响应式缩放
【发布时间】：2017-11-18 23:38:41
【问题描述】：

我正在努力使 SVG 徽标居中并使其响应缩放。我希望 SVG 根据屏幕宽度进行缩放，但最大宽度为 800 像素。对于较低的屏幕分辨率，它应该按比例缩小。我还需要它两边都有 40px 的填充。

每次加载页面或单击徽标时，背景/正文颜色都会随机化。

这是我正在使用的代码：

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
    <link href="http://static.tumblr.com/y3vtpdx/Lskoeb774/favicon.png" rel="icon" sizes="32x32" type="image/png">
    <title>
        Accoutrements
    </title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta charset="UTF-8">
    <meta content="Accoutrements is a multidisciplinary studio specialising in art direction, design, photography and screen printing." name="description">
    <meta content="accoutrements, art direction, design, manchester, photography, screen printing, studio” name=">
    <meta content="index,follow" name="robot">
    <meta content="© 2017 Accoutrements All rights reserved." name="copyright">
    <meta content="Accoutrements" name="author">
    <style>

    body {font-family: 'Work Sans', sans-serif;
       font-size: 18px;
       font-weight: 400;
       -webkit-font-smoothing: subpixel-antialiased;
       }

    .about {
       position: fixed;
       right: 40px;
       bottom: 40px;
    }

       .shop {
       position: fixed;
       right: 40px;
       top: 40px;
    }

       .studio {
       position: fixed;
       left: 40px;
       top: 40px;
    }

           .mood {
       position: fixed;
       left: 40px;
       bottom: 40px;
    }

    a {
    text-decoration: none;
    }


    svg.logo
    {
    position: absolute;
    max-width: 80%;
    top: 10%;
    left: 10%;
    }

    svg.logo:empty
    {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }

    @media screen and (orientation: portrait) {
    svg.logo {
     max-width: 90%;
    }
    }

    @media screen and (orientation: landscape) {
    svg.logo {
     max-height: 90%;
    }
    }
    </style>
</head>
<body>
    <div class="corner_link about">
        <a href="/about">About</a>
    </div>
    <div class="corner_link shop">
        <a href="/">Shop</a>
    </div>
    <div class="corner_link studio">
        <a href="/">Studio</a>
    </div>
    <div class="corner_link mood">
        <a href="/">Mood</a>
    </div>
    <div class="accoutrements">
        <svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
        <title>
            Accoutrements
        </title>
        <path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
        <path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
        <path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
        <polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
        <polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
        <polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
        <polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
        <path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
        <path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
        <path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
        <path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
        <path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
        <path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg> 
        <script>
          var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
          var rand = function() {
              return Math.floor(Math.random() * 6);
          };
          var randomColor = function() {
              var r = safeColors[rand()];
              var g = safeColors[rand()];
              var b = safeColors[rand()];
              return "#" + r + g + b;
          };
          var color_1 = randomColor();
          var color_2 = randomColor();
          $(document).ready(function() {
              color_change();
              $('#accoutrements').click(function() {
                  color_change();
              });
          });
          function color_change() {
              color_1 = randomColor();
              color_2 = randomColor();
              $('.corner_link a').css('color', color_1);
              $('.accoutrements').css('fill', color_1);
              $('body').css('background', color_2);
              $('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
          }
        </script>
    </div>
</body>

非常感谢您的帮助！

【问题讨论】：

标签： javascript html css svg responsive

【解决方案1】：

一旦我从您的代码中删除以下媒体查询，它就完全按照要求工作了。徽标居中且响应迅速，随着屏幕宽度的减小而缩小。

@media screen and (orientation: portrait) {
   svg.logo {
     max-width: 90%;
   }
}

现在，根据您的问题，我认为您可能希望将徽标的大小限制为 800 像素。也就是说，一旦徽标达到 800 像素宽度，它应该保持 800 像素宽度，然后将自身与中心对齐。如果是这样，可以通过以下媒体查询来实现。

@media screen and (min-width: 1000px) {
  svg.logo {
    max-width: 800px;
    position: inherit; /* Removing position: absolute */
    margin-top: 10vh;  /* Equivalent to having top: 10% */
    /* The following lines will horizontally center the logo. */
    display: block;
    margin: auto;
  }
}

徽标的最大宽度设置为 80%。因此，一旦屏幕宽度为 1000 像素，徽标就会变为 800 像素宽。因此，对于 1000 像素及以上的屏幕尺寸，我们绝对指定最大宽度（不是百分比）以防止其增长。因此，一旦屏幕达到 1000 像素或更大，徽标大小就会保持固定，并且会保持集中并位于屏幕顶部的 10% 处。

尝试一下，看看它是否是您想要的。否则请澄清你的问题。我正在使用 Google Chrome 58 并使用开发工具来检查响应能力。

【讨论】：

谢谢，已经成功了。有没有办法让它垂直和水平居中？还有一种方法可以向左/右添加 40px 填充，使其与四个文本链接的填充匹配？
要使 svg 垂直居中，您可以使用以下命令。 top: 50% /* if position: absolute; or use margin-top: 50vh*/ transform: translateY(-50%); 还包括相同属性的 -webkit、-moz、-ms 和 -o-transform 以确保跨浏览器功能。
我不明白您为什么需要添加填充，徽标完全适合没有任何填充。你能解释一下你在找什么吗？使用绝对定位和填充似乎会干扰响应。
你可以做的一件事，不使用绝对定位。并为您的 svg 使用以下 CSS。 svg.logo { max-width: 80%; height: auto; display: block; margin: auto; margin-top: 50vh; transform: translateY(-50%); padding-left: 40px; padding-right: 40px; } 。这样，徽标就具有响应性，水平和垂直居中，并且每边都有 40 像素的填充。
很高兴为您提供帮助。 :) 感谢您接受答案。