首页 文章

响应SVG viewBox

提问于
浏览 次
1

我在SVG中制作了一个“汉堡按钮”，如下所示 .

body {
  margin: 0;
  text-align: center;
}

svg#ham-btn {
  margin: 2rem;
  border: 1px solid black;
  fill: #383838;
}

<svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <style>
    #ham-btn {
      cursor: pointer;
    }
    #ham-btn:hover #r1 {
      outline: 1px solid transparent;
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(37deg) translate(0%, 28.75%) scaleX(1.1);
    }
    #ham-btn:hover #r2 {
      transition: transform 0.2s;
      transform: translate(120%, 0);
    }
    #ham-btn:hover #r3 {
      outline: 1px solid transparent;
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(-37deg) translate(0%, -28.75%) scaleX(1.1);
    }
    
  </style>
  <rect id="r3" x="0" y="71.25%" width="100%" height="15%" rx="5%" />
  <rect id="r2" x="0" y="42.5%" width="100%" height="15%" rx="5%"/>
  <rect id="r1" x="0" y="13.75%" width="100%" height="15%" rx="5%" />
</svg>

Question

现在，如果我想让按钮变小，我必须手动使视口的尺寸和 viewBox 减小相同的px量 .

有没有办法让它更具响应性？例如，通过使 viewBox 成为视口的百分比？

According to the spec，似乎 viewBox 必须是 <number> ，因此不能是一个百分比 .

有什么想法吗？

谢谢 .

Note 1

我没有在按钮上添加任何辅助功能或其他功能 . 这个问题是关于它的响应性 .

Note 2

我知道我可以使SVG视口占其容器/浏览器视口的百分比 .

遗憾的是，这并没有解决我的问题，因为要使这个按钮工作，我的viewBox到视口比率必须保持固定（否则按钮会失去其形状） .

因此，我想让 viewBox 成为视口的百分比 .

如果感兴趣，我的解决方案利用以下优势：

  • viewBox 比视口宽，但具有相同的高度

  • 因此， preserveAspectRatio 用于水平居中 rect

  • rect 尺寸以 viewBox 的百分比表示

outline 是在变换后用锯齿线修复Firefox问题 .

Edit:

如果对未来访问者有帮助，可以在此处找到最终按钮，包括完全可访问性：https://codepen.io/magnusriga/pen/KrrJKa

html css svg

2 回答

  • 0

    正如我在评论中告诉你的那样：我会删除svg元素的宽度和高度 . 然后在CSS中我会使SVG的宽度：20％ . 我将SVG的宽度设置为窗口宽度的50％ .

    为了保持比例，我把"hamburger"放在 <symbol viewBox="0 0 80 80"> 里面 . 在这种情况下粗略的你不再需要 preserveAspectRatio="xMidYMid meet" .

    body {
  margin: 0;
  text-align: center;
}

svg#ham-btn {
  width: 20%;
  margin:auto;
  top:0;bottom:0;left:0;right:0;
  border: 1px solid black;
  fill: #383838;
  position:absolute; 
}

    <svg id="ham-btn" viewBox="0 0 107.5 80" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <style>
    #ham-btn {
      cursor: pointer;
    }
    #ham-btn:hover #r1 {
      outline: 1px solid transparent;
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(37deg) translate(0%, 28.75%) scaleX(1.1);
    }
    #ham-btn:hover #r2 {
      transition: transform 0.2s;
      transform: translate(120%, 0);
    }
    #ham-btn:hover #r3 {
      outline: 1px solid transparent;
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(-37deg) translate(0%, -28.75%) scaleX(1.1);
    }
    
  </style>
  <symbol id="s" viewBox="0 0 80 80"> 
  <rect id="r3" x="0" y="71.25%" width="100%" height="15%" rx="5%" />
  <rect id="r2" x="0" y="42.5%" width="100%" height="15%" rx="5%"/>
  <rect id="r1" x="0" y="13.75%" width="100%" height="15%" rx="5%" />
  </symbol>  
  
  <use xlink:href="#s"  width="80" x="13.75"/>
</svg>
    回复于
  • 3

    为svg css添加宽度和高度属性 . 宽度设置和高度自动 .

    body {
  margin: 0;
  text-align: center;
}

svg#ham-btn {
  margin: 2rem;
  border: 1px solid black;
  fill: #383838;
  /* percentage of viewport - height will autocalculate */
  width: 7vw;
  height: auto;
}

    <svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <style>
    #ham-btn {
      cursor: pointer;
    }
    #ham-btn:hover #r1 {
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(37deg) translate(0%, 28.75%) scaleX(1.1);
    }
    #ham-btn:hover #r2 {
      transition: x 0.2s;
      x: 120%;
    }
    #ham-btn:hover #r3 {
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(-37deg) translate(0%, -28.75%) scaleX(1.1);
    }
    
  </style>
  <rect id="r3" x="0" y="71.25%" width="100%" height="15%" rx="5%" />
  <rect id="r2" x="0" y="42.5%" width="100%" height="15%" rx="5%"/>
  <rect id="r1" x="0" y="13.75%" width="100%" height="15%" rx="5%" />
</svg>
    回复于

相关问题