1

Не могу понять почему svg так не корректно отображается на хроме, если присмотреться то на кнопочке крестик, в середине линий пустые пиксели. Сверху правильно отображение ie11, а снизу хром

введите сюда описание изображения

Подключаю в тегом img, но и через фон такая же проблема.

<svg id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="15.414425397698665" height="15.414002244208632" viewBox="0 0 15.414425397698665 15.414002244208632"><title>close</title><desc>Created with Avocode.</desc><defs id="SvgjsDefs1001"></defs><path id="SvgjsPath1007" d="M325.647 46.3537L326.354 45.6465L332.00347999999997 51.29603L337.597 45.7027L338.29699999999997 46.4034L332.70414 51.99669L338.354 57.6466L337.64599999999996 58.3535L331.99688 52.70399999999999L326.404 58.29729999999999L325.703 57.59629999999999L331.29621 52.00327999999999Z " fill-opacity="0" fill="#ffffff" stroke-dasharray="0" stroke-linejoin="miter" stroke-linecap="square" stroke-opacity="1" stroke="#ffffff" stroke-miterlimit="50" stroke-width="1" transform="matrix(1,0,0,1,-324.29278730115067,-44.292998877895684)"></path></svg>
2
  • Будьте добры, покажите svg код
    – Shilgen
    30 дек 2016 в 8:20
  • @Shilgen к сожалению у меня только минимизированный, но если не разберетесь, то постараюсь как то его разобрать. Код генерировался из картинки в программе avocode. Код в топике. Спасибо 30 дек 2016 в 8:30

1 ответ 1

3

Проблема в том, что крестик залит прозрачным фоном:

fill-opacity="0"

Кроме того, можно выкинуть кучу лишних параметров из разметки.
А вообще, хочется этот крестик полностью переписать - см третий вариант...

body {
  background: black;
  font-size: 10em;
}

svg {
  height: 1em;
  width: 1em;
}
<svg id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="15.414425397698665" height="15.414002244208632" viewBox="0 0 15.414425397698665 15.414002244208632"><title>close</title><desc>Created with Avocode.</desc><defs id="SvgjsDefs1001"></defs><path id="SvgjsPath1007" d="M325.647 46.3537L326.354 45.6465L332.00347999999997 51.29603L337.597 45.7027L338.29699999999997 46.4034L332.70414 51.99669L338.354 57.6466L337.64599999999996 58.3535L331.99688 52.70399999999999L326.404 58.29729999999999L325.703 57.59629999999999L331.29621 52.00327999999999Z " fill-opacity="0" fill="#ffffff" stroke-dasharray="0" stroke-linejoin="miter" stroke-linecap="square" stroke-opacity="1" stroke="#ffffff" stroke-miterlimit="50" stroke-width="1" transform="matrix(1,0,0,1,-324.29278730115067,-44.292998877895684)"></path></svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15.414425397698665 15.414002244208632"><title>close</title><path d="M325.647 46.3537L326.354 45.6465L332.00347999999997 51.29603L337.597 45.7027L338.29699999999997 46.4034L332.70414 51.99669L338.354 57.6466L337.64599999999996 58.3535L331.99688 52.70399999999999L326.404 58.29729999999999L325.703 57.59629999999999L331.29621 52.00327999999999Z" fill="#ffffff" stroke="#ffffff" stroke-width="1" transform="matrix(1,0,0,1,-324.29278730115067,-44.292998877895684)"></path></svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-8 -8 16 16"><title>close</title><path d="M -6.7 -6.7 L 6.7 6.7 M -6.7 6.7 L 6.7 -6.7" fill="#ffffff" stroke="#ffffff" stroke-width="2"/></svg>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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