css - SVG 作为 <img/> 与内联

Question

我有一个奇怪的错误，我不确定如何修复。我正在使用加载 SVG 的代码 <img />元素。它应该是两个使用 Bootstrap 列重叠另一个图像的三 Angular 形。问题是两个三 Angular 形接触的地方。我从中得到一条微弱的白线或黑线 - 我猜 - 是半像素问题，因为 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>

Answer 1

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

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

您应该舍入 viewBox 的大小(当前 viewBox="0 0 1362.6 959")和最右边两个点的 x 坐标，然后重新编码 svg。