0

我在这里找到了这个问题。将值“none”添加到 preserveAspectRatio 确实解决了我在 Safari 中对于常规 . 但是，它并没有解决我的背景图像属性问题。

这些在除 Safari [v5.1.7] 之外的所有浏览器（Chrome、Firefox、IE、Opera）中都能正确扩展（如果版本很重要）。由于我希望显而易见的原因，我无法使用缩放属性（例如：适合、包含或覆盖），我必须保留对这些图形大小的控制。

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

在此处输入图像描述

这是它在 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>

或者为了更容易阅读： http ://www.myhhf.com/images/svg.php?r=gear_icon （请在 Safari 中查看源代码，因为仅在 Safari 中设置了 preserveAspectRatio 值为 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>

或者为了更容易阅读： http ://www.myhhf.com/images/svg.php?r=select （请在 Safari 中查看源代码，因为仅在 Safari 中为 preserveAspectRatio 设置了一个值为 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;
}

想法，想法，解决方案？

4

3 回答 3

14

我使用标签的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 在我指定此属性之前一直保持纵横比。

于 2017-05-16T21:15:19.767 回答
3

我相信我已经想通了。

经过广泛的研究（我的意思是广泛的），我发现了许多提示和技巧以及相互矛盾的文章。问题出在我的 SVG 中（我们还期待别的什么吗？）。

我读过的一篇文章建议我确保我有一个 viewbox 属性并删除宽度和高度属性。虽然我确实需要 viewbox 属性，但我也需要 width 和 height 属性。更多细节可以在这篇文章中找到。

于 2015-07-01T20:20:38.400 回答
0

我搜索了所有互联网（或几乎所有）以找出问题所在。正如您对我提到的那样，任何发现的“提示和技巧”都不起作用。最后，感谢您和互联网档案（您链接的网站不再可用），我找到了解决方案。

对我来说，解决方法是为height="..." width="..."每个 .svg 文件添加：属性。

于 2016-07-27T08:08:14.903 回答