Когда я использую любые готовые Ionicons или другие специально созданные SVG-иконки в моем приложении с вкладками, они все отлично работают, т.е.
- они неактивны при деактивации вкладки
- они получают основной цвет при активации вкладки
Если я создаю свою собственную ч / б иконку SVG с помощью Inkscape, в результате иконка не меняет свой цвет.
- значок вкладки всегда имеет исходный цвет (черный), только заголовок соответственно меняет цвет
Мое лучшее предположение заключается в том, что я делаю что-то ужасно неправильное, когда создаю правильную иконку с помощью Inkscape.
Что я сделал, чтобы исследовать мою проблему?
Сначала я взял свободно доступный значок SVG из Интернета и использовал его в своем приложении с вкладками в качестве пользовательского значка. Это сработало отлично, как и ожидалось!
Я использовал эту симпатичную форму самолета от GraphBerry:
Затем я загрузил тот же SVG в Inkscape и просто сохранил его как «Inkscape SVG». Размер файла немного больше из-за всех дополнительных вещей, которые добавляются Inkscape. Это все еще работает отлично, хотя.
Затем я добавил простой круг к форме самолета и снова сохранил его как Inkscape SVG. Загрузка полученного SVG как пользовательского значка все еще работает безупречно!
Далее я запустил новый значок с нуля и добавил 6 непересекающихся кругов с цветом Inkscape по умолчанию. Он был сохранен как Inkscape SVG и работал гладко!
Теперь неприятности начинаются! Я снова начал новую иконку, теперь у меня было два пересекающихся круга, один черный, другой серый. Я использовал серый, чтобы «отрезать» часть черного круга с помощью операции «Разница». Результатом является только черный вид "полумесяца". Сохранено как Inkscape SVG и использовано в качестве пользовательского значка в моем приложении. Он остается черным, и только черный. Никаких серых пятен, никакого цвета фокуса, ничего. Только заголовок вкладки соответственно изменяет цвета.
- Я абсолютно уверен, что значок - это значок одного цвета: черный.
- Я попробовал функциональность "Объект-путь" и другие отдельные меры, но это не помогло
Я не уверен, что не так с моим SVG-файлом, но я подозреваю, что недостаточно сделать SVG-файл однотонным, чтобы сделать его полезным значком?
Вероятно, нет ничего плохого в ионном / машинописном коде как таковом, потому что пользовательские значки в целом работают для меня. Но если вы хотите попробовать простой пример Ionic 4 с моим неправильным SVG, попробуйте это:
Создание стандартного ионного приложения с вкладками с 3 вкладками:
ionic start tabtester tabs
Теперь скопируйте файлы SVG в каталог "/ assets / icon /".
После этого добавьте пользовательские значки в файл "/app/tabs/tabs.page.html".
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab One</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon src="assets/icon/airplane-shape.svg"></ion-icon>
<ion-label>Tab Two</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon src="assets/icon/custom-shape-cut-circle.svg"></ion-icon>
<ion-label>Tab Three</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
- На вкладке One имеется готовая иконка Ionicons
- Tab Two использует вышеупомянутый значок Самолета
- Закладка Три ссылки на нерабочий значок самоделки
На этом рисунке вы видите все три вкладки, выбранные одна за другой, а третий значок не меняет свой цвет:
Это нерабочий код svg / xml для третьего значка с именем "custom-shape-cut-circle.svg":
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="612mm"
height="612mm"
viewBox="0 0 2168.5039 2168.5039"
id="svg4137"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="cusoim-shape-cut-circle.svg">
<defs
id="defs4139" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.24748737"
inkscape:cx="606.12303"
inkscape:cy="1233.4996"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1680"
inkscape:window-height="997"
inkscape:window-x="1672"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata4142">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,1116.1417)">
<path
style="opacity:0.98000004;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.53516412;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98039216"
d="M 951.78671,-1021.0711 A 967.75597,989.18228 0 0 0 248.96227,-710.12864 945.97847,886.05228 0 0 1 1076.422,168.09039 945.97847,886.05228 0 0 1 650.77296,907.50594 967.75597,989.18228 0 0 0 951.78671,957.29165 967.75597,989.18228 0 0 0 1919.5415,-31.888051 967.75597,989.18228 0 0 0 951.78671,-1021.0711 Z"
id="path4685"
inkscape:connector-curvature="0" />
</g>
</svg>
Ожидаемое поведение третьего значка должно быть аналогичным второму, оно должно быть серым, когда на деактивированной вкладке, и синим, когда на активированном.
Что за хитрость?
UPDATE:
С отличными ответами @Moini и @ j-t-houtenbos я наконец понял проблему с моими пользовательскими файлами.
Стиль является проблемой, и теперь, когда я знаю причину, я наконец понял опцию Inkscape Fill / Stroke «рисовать неопределенно».С этой опцией (вместо стилизации Fill / Stroke любым цветом) пользовательский значок работает безупречно!
Здесь можно найти параметр: Изображение: параметр Inkscape «рисовать не определено»
После получения информации в ответах я бы порекомендовал использовать этот параметртолько при составлении.Это облегчает вашу разработку, поскольку вам не нужно каждый раз вручную редактировать SVG.
При создании настраиваемого SVG для производства я настоятельно рекомендую использовать процедуры, описанные @ jt-houtenbos. Полученный размер файла составляетнамного меньше, и значок все еще полностью функционален!