Пользовательские значки Ionic 4 некорректно отображаются на симуляторе Android или IOS и устройствах - PullRequest
Новая
       33

Пользовательские значки Ionic 4 некорректно отображаются на симуляторе Android или IOS и устройствах

0 голосов
/ 15 февраля 2019

Я использовал иконки SVG в качестве пользовательских ионных элементов, как показано в моем решении.Он отлично работает с веб-представлением, но не работает на симуляторах или устройствах следующим образом.

enter image description here

Левая сторона - это симулятор, а правая сторона - это веб-представление

Моя реализация

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 папку.

1 Ответ

0 голосов
/ 18 февраля 2019

Файл 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>
...