Рассмотрите этот файл SVG (ссылка box.com; я не могу загрузить его здесь.)

Имеет символ "отмечено" или «отмечено-v», черный на прозрачном. Странно то, что некоторые зрители показывают это правильно, в то время как другие показывают, что он абсолютно пустой, то есть полностью прозрачный. Что касается редакторов, то и LibreOffice Draw, и Inkscape показывают пустой холст при загрузке, а gimp показывает фактическую галочку (она растеризует ее, конечно).

Действительно ли что-то не так с SVG, или это вина приложений? Независимо от того, могу ли я изменить SVG так, чтобы он с большей вероятностью читался правильно?

|источник

2 ответа2

2

Одним из ключей к пониманию файлов SVG является осознание того, что они не похожи на другие, распространенные форматы файлов изображений. Это язык разметки, более похожий на HTML и XML. Это источник вашего SVG-файла:

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <path fill="context-fill" fill-opacity="context-fill-opacity" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/>
</svg>

Это утверждение path является вашей галочкой. Атрибут d= - это инструкции, которые определяют форму галочки. Думайте об этом как о совершенно прозрачном (невидимом) куске стекла. Стекло существует ... но ты его не видишь. Вы можете почувствовать это и его форму ... но вы должны сделать больше, чтобы сделать это, чтобы вы могли видеть эту форму.

Здесь у вас нет атрибута инсульта. Штрих определил бы линию вокруг внешнего края формы. Мы можем определить ширину обводки (насколько толстой будет линия), ее цвет и другие свойства. Не сделав этого ... однако ... нет никакой линии вокруг нашей невидимой стеклянной формы ... поэтому она остается невидимой.

У нас есть свойства fill (fill= и fill-opacity=). Заливка определяет цвет и содержание поверхности вашей фигуры. Однако для свойств заполнения заданы значения context-fill и context-fill-opacity . Контекстное заполнение является нестандартной функцией. Вероятно, он будет поддерживаться более новой версией основных браузеров (я лично тестировал ее с новейшими версиями Edge, Firefox и Chrome)... однако нет никаких гарантий, что она будет поддерживаться программами просмотра и редактирования изображений, которые более оставаться ближе к стандартам. Любое приложение, которое не поддерживает эту функцию, может просто игнорировать ее полностью.

И это твоя проблема. У вас нет удара ... и в приложениях, которые не поддерживают заполнение контекстом, у вас нет заполнения. Это оставляет вас с этими невидимыми кусочками стекла. Это там ... вы просто не можете видеть это.

|источник
0

Когда я загрузил файл в Inkscape, он оказался пустым, но Control-A выбрал «все». Используя функцию обводки и заливки в Inkscape, я оставил заливку пустой и добавил цвет обводки.

галочки

Верхнее изображение имеет ширину обводки 0,265 мм, а нижнее имеет гораздо меньшее значение.

|источник

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .