Question

我在解决方案中将svg图标用作自定义离子项目。可以在Web视图下正常工作，但不能在以下模拟器或设备上正常工作。

左侧是模拟器，右侧是网络视图

我的实现

angular.json

....
        "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              },
              {
                "glob": "**/*.svg",
                "input": "src/assets/icon/ion-icons",
                "output": "./svg"
              }
            ],
....

HTML

<ion-icon name="decrease"></ion-icon>

Svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="7" height="4" viewBox="0 0 7 4">
  <defs>
    <clipPath id="clip-path">
      <path id="Shape" d="M2.793,3.5.146,6.146a.5.5,0,0,0,.707.707l3-3a.5.5,0,0,0,0-.707l-3-3A.5.5,0,0,0,.146.854Z"/>
    </clipPath>
  </defs>
  <g id="Group_34" data-name="Group 34" transform="translate(7) rotate(90)" clip-path="url(#clip-path)">
    <g id="COLOR_black" data-name="COLOR/ black" transform="translate(-4 -2.5)">
      <rect id="COLOR_black_background" data-name="COLOR/ black background" width="12" height="12" fill="rgba(0,0,0,0)"/>
      <rect id="Rectangle" width="12" height="12" fill="#0171ad"/>
    </g>
  </g>
</svg>

我已将ios-decrease.svg和md-decrease.svg放在src/assets/icon/ion-icons文件夹中。

Answer 1

SVG文件有问题。 ClipPath在android上不起作用。这也发生在浏览器上。尝试使用此SVG

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="7" height="4" viewBox="0 0 7 4" style="enable-background:new 0 0 7 4;" xml:space="preserve">
    <path fill="#0171AD" d="M3.5,2.8L0.9,0.1C0.7,0,0.3,0,0.1,0.2C0,0.4,0,0.7,0.1,0.9l3,3C3.3,4,3.7,4,3.9,3.9l3-3C7,0.7,7,0.3,6.9,0.1
	S6.3,0,6.1,0.1L3.5,2.8z"/>
</svg>

Ionic 4自定义图标在Android或IOS模拟器和设备上无法正确显示

1 个答案: