什么是在A-Frame中渲染SVG图标的正确解决方案，这样我就不会在某些图形上得到这种模糊效果？

Question

我的A框应用是基本的360度照片导览。如您在下面看到的，我正在为游览“热点”呈现svg图标。一些图标可以很好地加载，但其他图标则具有模糊效果。 如果有帮助，我创建了codepen来展示如何实现SVG图标：https://codepen.io/trentontri/pen/JQyNrE

<a-scene cursor="rayOrigin: mouse">
 <a-assets>
  <a-mixin id="icon-animation" geometry="primitive: ring; radiusInner: 0.5; radiusOuter: 0.8;" material="color: #fff; opacity: 0.5" animation="property: geometry.radiusOuter; from: 0.8; to: 1.2; dur: 1000; easing: easeInOutSine; dir:alternate; loop: true;">
 </a-mixin>
 <a-asset-item id="icon-plus" src="https://gist.githubusercontent.com/trentontri/876c8050c5353ef44dcb1bada768c6a9/raw/e116742c4d461e0d404e60e07fe6c785a781c0ba/icon-plus.svg"></a-asset-item>
 </a-assets>

<a-entity position="0 1.8 -3">
 <a-entity mixin="icon-animation">
  <a-entity svg="src: #icon-plus;"></a-entity>
 </a-entity>
</a-entity>

 <a-entity id="rig">
  <a-entity id="camera" camera look-controls></a-entity>
 </a-entity>
</a-scene>

Answer 1

您的.iml符号似乎在与蓝色圆圈进行Z形战斗。参见此处：https://en.wikipedia.org/wiki/Z-fighting请给他们一个不同的position.z值，这样他们就不会占据同一平面。