在Safari

Question

我发现了这个问题here。将值“none”添加到preserveAspectRatio确实修复了我在Safari中常规使用的相同问题。但是，它并没有解决我的背景图像属性问题。

除Safari [v5.1.7]外，每个浏览器（Chrome，Firefox，IE，Opera）都能正确缩放（如果版本很重要）。由于我希望显而易见的原因，我无法使用缩放属性（例如：fit，contains或cover），我必须保持对这些图形大小的控制。

这就是它在所有浏览器中出现的方式 （我们正在查看灰色齿轮图标，而不是绿色和黄色图标）：

这就是Safari出现的方式：

SVG ：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 60 60" preserveAspectRatio="xMidYMid none" enable-background="new 0 0 60 60" xml:space="preserve"><symbol id="Deleted_Symbol_2" viewBox="-13.5 -13.5 27 27"><path fill-rule="evenodd" clip-rule="evenodd" fill="#72C8F0" d="M-10.39 13.5h20.78c1.71 0 3.11-1.4 3.11-3.11v-20.78c0-1.71-1.4-3.11-3.11-3.11H-10.39c-1.71 0-3.11 1.4-3.11 3.11V10.39C-13.5 12.1-12.1 13.5-10.39 13.5L-10.39 13.5z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#D1ECF2" d="M-10.03 13.04h20.06c1.65 0 3.01-1.35 3.01-3.01v-20.06c0-1.65-1.35-3.01-3.01-3.01H-10.03c-1.65 0-3.01 1.35-3.01 3.01V10.03C-13.03 11.68-11.68 13.04-10.03 13.04L-10.03 13.04z"/><polygon fill-rule="evenodd" clip-rule="evenodd" fill="#016699" points="0 -4.35 2.51 0 5.03 4.35 0 4.35 -5.03 4.35 -2.51 0 0 -4.35 "/></symbol><symbol id="Deleted_Symbol_3" viewBox="-7.5 -7.5 15 15"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#1A1A1B" stroke-miterlimit="2.61" d="M-4.83 7h9.66c1.19 0 2.17-0.98 2.17-2.17v-9.67c0-1.2-0.98-2.17-2.17-2.17h-9.66c-1.2 0-2.17 0.97-2.17 2.17v9.67C-7 6.02-6.03 7-4.83 7z"/></symbol><symbol id="Gear" viewBox="-8.87 -9.01 17.74 18.01"><path fill="#333333" d="M8.32 1.39c-0.64 0.07-1.21 0.17-1.84 0.26C6.31 1.67 6.22 1.76 6.18 1.91 6.09 2.23 6.03 2.56 5.96 2.89 5.95 2.95 6 3.05 6.04 3.1c0.47 0.58 0.94 1.16 1.42 1.73 0.23 0.27 0.23 0.57-0.02 0.82C7.02 6.07 6.59 6.5 6.16 6.92 5.89 7.18 5.6 7.19 5.31 6.93c-0.56-0.49-1.17-0.93-1.83-1.27C3.41 5.62 3.34 5.61 3.27 5.6 2.82 5.58 2.43 5.76 2.04 5.94 1.94 5.98 1.89 6.04 1.88 6.15 1.81 6.91 1.74 7.68 1.67 8.44 1.65 8.79 1.44 9.01 1.08 9.01c-0.62 0-1.23 0-1.85 0 -0.36 0-0.57-0.21-0.59-0.57 -0.03-0.76-0.12-1.51-0.31-2.25 -0.05-0.21-0.18-0.32-0.38-0.37C-2.29 5.76-2.53 5.73-2.77 5.68c-0.14-0.03-0.27 0.01-0.4 0.08 -0.65 0.35-1.24 0.77-1.79 1.25 -0.29 0.26-0.59 0.25-0.87-0.02 -0.42-0.41-0.83-0.82-1.25-1.23 -0.29-0.29-0.28-0.56-0.02-0.87C-6.62 4.33-6.17 3.76-5.7 3.19c0.04-0.05 0.07-0.11 0.07-0.17C-5.65 2.85-5.65 2.66-5.71 2.49c-0.09-0.24-0.22-0.46-0.34-0.69C-6.08 1.75-6.15 1.69-6.22 1.67c-0.68-0.19-1.38-0.3-2.08-0.33C-8.65 1.32-8.87 1.11-8.87 0.76c0-0.6 0-1.2 0-1.8 0-0.37 0.21-0.57 0.59-0.6 0.67-0.06 1.33-0.14 2-0.2 0.18-0.02 0.29-0.1 0.33-0.26 0.1-0.35 0.18-0.7 0.25-1.05 0.01-0.07-0.02-0.16-0.07-0.22 -0.47-0.58-0.93-1.15-1.41-1.72 -0.1-0.12-0.19-0.25-0.19-0.41C-7.37-5.66-7.29-5.8-7.17-5.92c0.43-0.42 0.85-0.84 1.28-1.25 0.28-0.27 0.57-0.28 0.87-0.02 0.51 0.45 1.06 0.84 1.65 1.18C-3.16-5.89-2.96-5.84-2.71-5.86c0.33-0.02 0.62-0.15 0.88-0.34 0.05-0.03 0.09-0.09 0.1-0.15 0.2-0.67 0.31-1.36 0.34-2.05 0.02-0.39 0.24-0.61 0.63-0.61 0.59 0 1.18 0 1.77 0 0.41 0 0.61 0.22 0.65 0.61C1.71-7.72 1.8-7.05 1.86-6.38c0.01 0.11 0.07 0.18 0.16 0.23C2.1-6.11 2.18-6.07 2.26-6.05c0.31 0.07 0.62 0.14 0.93 0.2 0.08 0.01 0.18 0 0.26-0.04C4.13-6.25 4.75-6.68 5.32-7.19c0.28-0.25 0.58-0.24 0.85 0.02C6.59-6.75 7.01-6.33 7.43-5.92c0.28 0.27 0.27 0.56 0.02 0.85 -0.46 0.54-0.9 1.09-1.35 1.63 -0.12 0.14-0.15 0.3-0.15 0.48C5.97-2.59 6.16-2.29 6.29-1.97c0.04 0.08 0.09 0.12 0.18 0.13 0.68 0.07 1.24 0.14 1.92 0.2C8.79-1.6 8.87-1.41 8.87-1.02c0 0.57 0 1.14 0 1.71C8.87 1.14 8.78 1.34 8.32 1.39zM0.09-3.86c-2.05 0-3.74 1.69-3.74 3.72 0 2.06 1.7 3.72 3.8 3.72 2.09 0 3.78-1.67 3.78-3.73C3.92-2.22 2.22-3.86 0.09-3.86z"/></symbol><use xlink:href="#Gear" width="17.74" height="18.01" x="-8.87" y="-9.01" transform="matrix(3.3306673 0 0 -3.3306673 30.0006752 29.9995995)" overflow="visible"/></svg>

OR稍微容易阅读： http://www.myhhf.com/images/svg.php?r=gear_icon （请在Safari中查看源代码，因为为preserveAspectRatio设置的条件在Safari中的值为none。）

HTML ：

<table class="records" cellpadding="0" cellspacing="0" border="0">
  <tbody>
    <tr record_id="46038" style="height: 26px; min-height: 0px;">
      <td>...</td>
      <td rowspan="2">...</td>
      <td class="controls" style="width:5%; height:auto; min-height:100%;" actions="l9" records="records_by_id" rowspan="2"></td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

CSS （注意：这是一个从非常大型网站中获取的小片段。）：

.controls{
      cursor: pointer;
      position: relative;
      background-image: url(../images/svg.php?r=gear_icon);
      background-repeat: no-repeat;
      background-size: 1.386em 1.386em;
      background-position: center;
      color: #000;
}
.records > tbody > tr > td{
      white-space: normal;
      padding: .385em .77em;
}
.records > tbody > tr > td.controls{
      width: 100%;
      height: 100% !important;
      padding: 0 !important;
}
.records > tbody > tr > td:nth-child(2)[rowspan] + .controls{
     background-position: center .77em;
}

更新：这是另一个正在发生的事情的示例，结果略有不同：

所以〜与齿轮图标不同，这个背景图像伸展到它的整个容器。

SVG ：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 60 60" preserveAspectRatio="xMaxYMid none" enable-background="new 0 0 60 60" xml:space="preserve"><symbol id="Deleted_Symbol_2" viewBox="-13.5 -13.5 27 27"><path fill-rule="evenodd" clip-rule="evenodd" fill="#72C8F0" d="M-10.39 13.5h20.78c1.71 0 3.11-1.4 3.11-3.11v-20.78c0-1.71-1.4-3.11-3.11-3.11H-10.39c-1.71 0-3.11 1.4-3.11 3.11V10.39C-13.5 12.1-12.1 13.5-10.39 13.5L-10.39 13.5z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#D1ECF2" d="M-10.03 13.04h20.06c1.65 0 3.01-1.35 3.01-3.01v-20.06c0-1.65-1.35-3.01-3.01-3.01H-10.03c-1.65 0-3.01 1.35-3.01 3.01V10.03C-13.03 11.68-11.68 13.04-10.03 13.04L-10.03 13.04z"/><polygon fill-rule="evenodd" clip-rule="evenodd" fill="#016699" points="0 -4.35 2.51 0 5.03 4.35 0 4.35 -5.03 4.35 -2.51 0 0 -4.35 "/></symbol><symbol id="Deleted_Symbol_3" viewBox="-7.5 -7.5 15 15"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#1A1A1B" stroke-miterlimit="2.61" d="M-4.83 7h9.66c1.19 0 2.17-0.98 2.17-2.17v-9.67c0-1.2-0.98-2.17-2.17-2.17h-9.66c-1.2 0-2.17 0.97-2.17 2.17v9.67C-7 6.02-6.03 7-4.83 7z"/></symbol><symbol id="Dropdown" viewBox="-13.5 -13.5 27 27"><use xlink:href="#Deleted_Symbol_2" width="27" height="27" x="-13.5" y="-13.5" transform="matrix(1 0 0 1 -0.0000024 0.0000329)" overflow="visible"/></symbol><use xlink:href="#Dropdown" width="27" height="27" x="-13.5" y="-13.5" transform="matrix(2.2222223 0 0 -2.2222223 29.9991875 29.9998035)" overflow="visible"/></svg>

OR稍微容易阅读： http://www.myhhf.com/images/svg.php?r=select （请在Safari中查看源代码，因为为preserveAspectRatio设置的条件在Safari中的值为none。）

HTML ：

<div class="select_box" id="specify_existing_profile">
  <span>Lisa Simpson 08/28/1993</span>
  <select>....</select>
</div>

CSS ：

.select_box {
    display: inline-block;
    min-height: 2.079em;
    background-color: #FFF;
    background-image: url(../images/svg.php?r=select);
    background-size: auto 100%;
    background-repeat: no-repeat !important;
    background-position: right !important;
    border: 1px solid #09C;
    border-radius: .385em;
}

思想，想法，解决方案？

Answer 1

我使用preserveAspectRatio标记的<svg>属性解决了我的宽高比问题：

<svg ... preserveAspectRatio="..."> ... </svg>

在我的情况下，我希望我的SVG填充div的背景并且不保持其宽高比，所以我使用了：

<svg ... preserveAspectRatio="none"> ... </svg>

此处有更多详情：

https://developer.mozilla.org/en/docs/Web/SVG/Attribute/preserveAspectRatio

在我的情况下，似乎Chrome和FireFox默认为"none"，而safari维持宽高比直到我指定此属性。

Answer 2

我相信我已经弄清楚了。

在 广泛的 研究之后（我的意思是广泛的）我找到了很多提示＆amp;技巧＆amp;相互矛盾的文章。问题发生在我的SVG中（我们还期待其他什么吗？）。

我读过的一篇文章建议我确保我有一个viewbox属性＆amp;删除宽度＆amp;高度属性。虽然我确实需要viewbox属性I，但是，还需要宽度＆amp;高度属性。有关详细信息，请参阅本文here。

Answer 3

我搜索了所有互联网（或几乎所有）以找出问题所在。正如你所提到的，任何找到的＆＃34;提示＆amp;技巧＆＃34;没有工作。最后，感谢您和互联网存档（您链接的网站不再可用），我找到了解决方案。

对我来说，修复是为每个.svg文件添加：height="..." width="..."属性。