个人中心
gpt4 book ai didi

javascript - 使 SVG 响应式缩放

转载 作者：行者123 更新时间：2023-11-28 02:40:54 25 4
gpt4 key购买 nike

我竭尽全力试图使 SVG Logo 居中并使其响应缩放。我希望 SVG 根据屏幕宽度缩放，但最大宽度为 800 像素。对于较低的屏幕分辨率，它应该缩小。我还需要它在两边都有 40px 的填充。

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

这是我使用的代码:

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

非常感谢您的帮助!

最佳答案

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

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

现在，根据您的问题，我认为您可能想将 Logo 的大小限制为 800 像素。也就是说，一旦 Logo 达到 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;
  }
}

Logo 的最大宽度设置为 80%。因此，一旦屏幕宽度为 1000 像素， Logo 就会变为 800 像素宽。因此，对于 1000 像素及以上的屏幕尺寸，我们绝对指定最大宽度(而不是百分比)以防止它增长。因此，一旦屏幕达到 1000 像素或更大， Logo 大小将保持固定并且保持居中，并且距屏幕顶部 10%。

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

关于javascript - 使 SVG 响应式缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44585081/

25 4 0
文章推荐： javascript - 如何在不使用 jQuery 的情况下在 IE 的数字输入中显示微调控件(向上/向下箭头)？
文章推荐： javascript - Sticky Sidebar Like Facebook 如何添加偏移量？
文章推荐： JAVASCRIPT亮度功能-降低
文章推荐： html - 滚动区域外的元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com