SVG 背景图像在 Safari 中无法正确缩放
SVG background-image not scaling properly in Safari
我找到了这个问题 here。将值 "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;
}
想法、想法、解决方案？
我相信我已经弄明白了。
经过 广泛 研究（我的意思是广泛）后，我发现了许多提示和技巧以及相互矛盾的文章。问题出在我的 SVG 中（我们还期待其他什么吗？）。
我读过的一篇文章建议我确保我有一个 viewbox 属性并删除宽度和高度属性。虽然我确实需要 viewbox 属性，但我也需要 width & height 属性。可以在本文 here.
中找到更多详细信息
我搜索了整个互联网（或几乎所有互联网）以找出问题所在。正如您为我提到的那样，发现 "tips & tricks" 中的任何一个都不起作用。最后，感谢您和互联网档案（您链接到的网站不再可用）我找到了解决方案。
对我来说，解决方法是添加：height="..." width="..." 属性到每个 .svg 文件。
我使用 <svg> 标签的 preserveAspectRatio 属性解决了我的纵横比问题：
<svg ... preserveAspectRatio="..."> ... </svg>
在我的例子中，我希望我的 SVG 填充 div 的背景并且不保持其纵横比，所以我使用了：
<svg ... preserveAspectRatio="none"> ... </svg>
此处有更多详细信息：
https://developer.mozilla.org/en/docs/Web/SVG/Attribute/preserveAspectRatio
在我的情况下，Chrome 和 FireFox 似乎默认为 "none"，而 Safari 一直保持纵横比，直到我指定此属性。
我找到了这个问题 here。将值 "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;
}
想法、想法、解决方案？
我相信我已经弄明白了。
经过 广泛 研究（我的意思是广泛）后，我发现了许多提示和技巧以及相互矛盾的文章。问题出在我的 SVG 中（我们还期待其他什么吗？）。
我读过的一篇文章建议我确保我有一个 viewbox 属性并删除宽度和高度属性。虽然我确实需要 viewbox 属性，但我也需要 width & height 属性。可以在本文 here.
中找到更多详细信息我搜索了整个互联网（或几乎所有互联网）以找出问题所在。正如您为我提到的那样，发现 "tips & tricks" 中的任何一个都不起作用。最后，感谢您和互联网档案（您链接到的网站不再可用）我找到了解决方案。
对我来说，解决方法是添加：height="..." width="..." 属性到每个 .svg 文件。
我使用 <svg> 标签的 preserveAspectRatio 属性解决了我的纵横比问题：
<svg ... preserveAspectRatio="..."> ... </svg>
在我的例子中，我希望我的 SVG 填充 div 的背景并且不保持其纵横比，所以我使用了：
<svg ... preserveAspectRatio="none"> ... </svg>
此处有更多详细信息：
https://developer.mozilla.org/en/docs/Web/SVG/Attribute/preserveAspectRatio
在我的情况下，Chrome 和 FireFox 似乎默认为 "none"，而 Safari 一直保持纵横比，直到我指定此属性。