Question

在下面的svg符号中，我试图根据屏幕大小调整大小，它在Chrome和Firefox中运行良好，但在Safari中，无论是否大小和位置似乎始终相同屏幕大小，我在这里做错了什么或者我应该改变什么？

＆＃13;

.c-btn-play {
   max-width:80%;
   height: 100%;
   transform: translateY(15%);
   -ms-transform: translateY(15%);
   -moz-transform: translateY(15%);
   -webkit-transform: translateY(15%);
   -o-transform: translateY(15%);
}

@include mq($from: tablet, $until: desktop) {
  .c-btn-play {
    float:right;
    height: 85%;
  }
}

@include mq($from: desktop, $until:wide) {
  .c-btn-play {
    height: 90%;
    float:right;
    margin-right:10%;
  }
}

@include mq($from:wide) {
  .c-btn-play {
    height:120%;
    float:right;
    margin-right:23%;
  }
}

＆＃13;

<!-- Symbols-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none; " >
  <symbol id="video-play" viewbox="0 0 60 70" >
    <g>
      <path fill="none" stroke="#231f20" stroke-width="2" d="M30,7C17.32,7,7,17.32,7,30      c0,12.68,10.32,23,23,23c12.68,0,23-10.32,23-23C53,17.32,42.68,7,30,7z" class="stroke-bg"></path>
      <path fill="transparent" stroke="#231f20" stroke-width="2" d="M30,7C17.32,7,7,17.32,7,30      c0,12.68,10.32,23,23,23c12.68,0,23-10.32,23-23C53,17.32,42.68,7,30,7z" class="stroke"></path>
      <path fill="transparent" stroke="#231f20" stroke-width="2" d="M24.89,40.84c-0.37,0.22-0.83,0.23-1.2,0.02s-0.6-0.61-0.6-1.04V20.2c0-0.43,0.23-0.83,0.6-1.04      c0.37-0.21,0.83-0.21,1.2,0.02l16.35,9.81c0.36,0.21,0.58,0.6,0.58,1.02s-0.22,0.81-0.58,1.02L24.89,40.84z" class="play"></path>
    </g>
  </symbol>
</svg>

<div class='grid'>
          <svg class="c-btn-play"><use xlink:href="#video-play"></use></svg>
</div>

＆＃13;

如何在Safari中正确调整SVG大小[标记在Chrome / Firefox中正常工作]

0 个答案: