Question

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

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

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

不正确（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时，我看到非圆形的cooredinates。

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

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

Answer 2

我对SVG进行了更新以删除小数，因为edzis建议但是仍然无法解决问题。我发现的唯一修复是用PNG替换SVG。

SVG为<img/> vs内联

2 个答案: