SVG 作为 <img /> 与内联答案

【问题标题】：SVG as <img /> vs inlineSVG 作为 <img /> 与内联
【发布时间】：2018-03-22 02:33:34
【问题描述】：

我有一个奇怪的错误，我不知道如何修复。我正在使用将 SVG 加载到 <img /> 元素的代码。它应该是使用与另一个图像重叠的 Bootstrap 列的两个三角形。问题是两个三角形接触的地方。我得到一条微弱的白线或黑线 - 我猜 - 是半像素问题，因为 Bootstrap 列是按百分比设置的。您可以在调整页面大小时看到这一点。

我注意到当我内联 svg 元素时，它们会正确加载并且没有行。

由于这是一个设置为将 SVG 加载为 <img /> 的项目，我该如何解决这个问题？

不正确（SVG 加载为 <img />）

https://codepen.io/awrp/pen/JLjWVd

.container-fluid {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 887px;
  position: relative;
  overflow: hidden;
}

.angle--left {
  height: 100%;
}
.angle--left img {
  position: absolute;
  right: 0;
  height: 887px;
  opacity: 0.5;
}

.angle--right img {
  position: absolute;
  height: 887px;
  left: 0;
  opacity: 0.5;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container-fluid" style="background-image: url('http://placehold.it/1200x887')">
	<div class="hidden-xs col-sm-2"></div>
	<div class="angle--left col-xs-12 col-md-8">
		<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzYyLjYgOTU5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMzYyLjYgOTU5Ij48cGF0aCBkPSJNMTM2Mi42IDBMMCA5NTloMTM2Mi42eiIvPjwvc3ZnPg==" />
	</div>
	<div class="angle--right col-md-2 hidden-xs hidden-sm">
		<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0NCAtODMgOTAwIDk1OSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxNDQgLTgzIDkwMCA5NTkiPjxwb2x5Z29uIHBvaW50cz0iMTQ0LDg3NiAxMDQ0LDg3NiAxMDQ0LDcwMiAxNDQsLTgzICIvPjwvc3ZnPg==" />
	</div>
</section>

正确（内联 SVG）：

https://codepen.io/awrp/pen/rdNyjq

.container-fluid {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 887px;
  position: relative;
  overflow: hidden;
}

.angle--left {
  height: 100%;
}
.angle--left svg {
  position: absolute;
  right: 0;
  height: 887px;
  opacity: 0.5;
}

.angle--right svg {
  position: absolute;
  height: 887px;
  left: 0;
  opacity: 0.5;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container-fluid" style="background-image: url('http://placehold.it/1200x887')">
	<div class="hidden-xs col-sm-2"></div>
	<div class="angle--left col-xs-12 col-md-8">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1362.6 959" enable-background="new 0 0 1362.6 959"><path d="M1362.6 0L0 959h1362.6z"/></svg>
	</div>
	<div class="angle--right col-md-2 hidden-xs hidden-sm">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="144 -83 900 959" enable-background="new 144 -83 900 959"><polygon points="144,876 1044,876 1044,702 144,-83 "/></svg>
	</div>
</section>

【问题讨论】：

标签： css twitter-bootstrap svg

【解决方案1】：

查看 svg 时，我看到非圆形坐标。

图像元素必须采用完整像素的大小，并且在处理未四舍五入为像素的 svg 内容时，它们的表示会导致难以预测的场景。

你应该对viewBox的大小（当前viewBox="0 0 1362.6 959"）和最右边两个点的x坐标进行四舍五入，然后重新编码svg。

【讨论】：

【解决方案2】：

我按照 edzis 的建议对 SVG 进行了更新以删除小数点，但这仍然没有解决问题。我发现的唯一解决方法是用 PNG 替换 SVG。

【讨论】：