制作SVGs响应式地缩放

问题描述：

我拉着我的头发试图将SVG标志居中并使其响应缩放。我希望SVG根据屏幕宽度进行缩放，但最大宽度为800像素。对于较低的屏幕分辨率，它应该缩小。我也需要它在两边都有40px的填充。制作SVGs响应式地缩放

每次加载页面或点击徽标时，背景/实体颜色都会随机发生变化。

下面是我使用的代码：

<!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>

非常感谢您的帮助！

答

一旦我删除以下媒体查询，从您的代码，它绝对按需运作。标志居中且有反应，随着屏幕宽度的减小而缩小。现在

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

，从你的问题，我认为，也许你想徽标的大小限制为800像素。这是一旦徽标达到800px宽度，它应该保持800px宽，然后只是自己对齐中心。如果是这样，那么可以通过以下媒体查询来实现。

@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％。所以一旦屏幕宽度为1000px，徽标变为800px宽。因此，对于1000px及以上的屏幕尺寸，我们绝对（不是以百分比）指定最大宽度以防止它增长。因此，一旦屏幕大小为1000像素或更大，徽标大小将保持不变，并保持集中，屏幕顶部为10％。

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

谢谢，这是行得通的。无论如何，它是垂直居中还是水平居中？还有一种方法可以将40px填充添加到左/右，以便它匹配四个文本链接的填充？ – Jacob

要垂直居中svg，您可以使用以下内容。 'top：50％/ * if position：absolute;或使用margin-top：50vh */ transform：translateY（-50％）;' 同样包含-webkit，-moz，-ms和-o-transform属性以确保跨浏览器功能。 – Rithwik

我不明白你为什么需要添加填充物，确切的说，这个logo很适合没有任何填充。你能解释一下你在找什么吗？使用绝对定位和填充似乎会干扰响应。 – Rithwik

制作SVGs响应式地缩放

相关推荐