製作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>

非常感謝您的幫助！

來源

2017-06-16 Jacob

一旦我刪除以下媒體查詢，從您的代碼，它絕對按需運作。標誌居中且有反應，隨着屏幕寬度的減小而縮小。現在

@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並使用開發工具來檢查響應性。

來源

2017-06-16 10:04:19 Rithwik

謝謝，這是行得通的。無論如何，它是垂直居中還是水平居中？還有一種方法可以將40px填充添加到左/右，以便它匹配四個文本鏈接的填充？ – Jacob

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

我不明白你爲什麼需要添加填充物，確切的說，這個logo很適合沒有任何填充。你能解釋一下你在找什麼嗎？使用絕對定位和填充似乎會干擾響應。 – Rithwik

製作SVGs響應式地縮放

回答

相關問題