SVG и text-shadow, разница между Chrome и Firefox
При создании 3D-эффекта для некоторого текста SVG путем наложения нескольких теней текста с помощью CSS, я получаю очень разные результаты между Chrome и Firefox. См. Пример ниже и скриншоты ниже.
Что вызывает эту разницу и как ее избежать? Или мне, возможно, следует использовать более эффективный метод для создания этого эффекта?
<svg xmlns:xlink = "http://www.w3.org/1999/xlink" version = "1.1" xmlns = "http://www.w3.org/2000/svg" width = "200px" height = "100px">
<defs>
<style>
text {
fill: white;
font-family: Arial, Sans;
text-shadow: -1px 1px #1E00BE, -2px 2px #1E00BE, -3px 3px #1E00BE, -4px 4px #1E00BE, -5px 5px #1E00BE, -6px 6px #1E00BE, -7px 7px #1E00BE, -8px 8px #1E00BE, -9px 9px #1E00BE, -10px 10px #1E00BE;
}
</style>
</defs>
<rect x = "0" y = "0" width = "200" height = "100" fill = "red"></rect>
<text x = "100px" y = "50px" font-size = "50" text-anchor = "middle" dominant-baseline = "middle">Hello</text>
</svg>Хром:
Fire Fox:
Интересно, что на chrome 65 для Android я получаю тот же результат, что и вы, но на том же chrome 65 на macOS я получаю результат FF. Это будет иметь тенденцию к специфической для платформы ошибке на стороне Chrome, поэтому лучше всего сообщить им об этом с помощью открытие билета и указать вашу собственную платформу.
—
30.03.2018 11:04
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
2
163
1
Ответы 1
text-shadow предназначен для элементов HTML, на тот факт, что он (в основном) работает с SVG, не следует полагаться. Возможно, он вообще не отображается в IE, например.
Я бы предложил воспроизвести эффект с несколькими текстовыми элементами, например:
<svg xmlns:xlink = "http://www.w3.org/1999/xlink" version = "1.1" xmlns = "http://www.w3.org/2000/svg" width = "200px" height = "100px">
<defs>
<style>
text {
fill: #1E00BE;
font-family: Arial, Sans;
font-size: 50px;
text-anchor: middle;
dominant-baseline: middle;
}
text:last-of-type {
fill: white;
}
</style>
</defs>
<rect x = "0" y = "0" width = "200" height = "100" fill = "red"></rect>
<text x = "100" y = "50">Hello</text>
<text x = "100" y = "50" dx = "1" dy = "-1">Hello</text>
<text x = "100" y = "50" dx = "2" dy = "-2">Hello</text>
<text x = "100" y = "50" dx = "3" dy = "-3">Hello</text>
<text x = "100" y = "50" dx = "4" dy = "-4">Hello</text>
<text x = "100" y = "50" dx = "5" dy = "-5">Hello</text>
<text x = "100" y = "50" dx = "6" dy = "-6">Hello</text>
<text x = "100" y = "50" dx = "7" dy = "-7">Hello</text>
<text x = "100" y = "50" dx = "8" dy = "-8">Hello</text>
<text x = "100" y = "50" dx = "9" dy = "-9">Hello</text>
<text x = "100" y = "50" dx = "10" dy = "-10">Hello</text>
</svg>Другие вопросы по теме
Vue devtools не будет отображаться в приложении Laravel Mix
Приложение Graphiql показывает лишние символы мусора
Как изменить пользовательский агент Google Chrome в Selenium?
Невозможно получить доступ к отладке Chrome без головы
Служба истории браузера Chrome
Непонятные результаты с typeof и isNaN с операцией (1 + undefined)
Невозможно удалить текст заголовка страницы при печати из браузера Chrome
RxJS / Drag-and-drop: событие перетаскивания запускается при нажатии в Chrome; Зачем?
Chrome расширение содержимого javascript путаница вырезать, скопировать, вставить
Найдите элемент DOM с помощью XPath, начиная с другого элемента DOM
Похожие вопросы
Используйте адаптивное изображение вместе с Flexbox
Полоса прокрутки скрыта под элементом с абсолютным позиционированием
Как выбрать родительский тег на основе innerHTML дочернего тега?
Панель инструментов Google Translate Отключить
Как удалить div, содержащий рекламный код, после клика по объявлению?
Как программно преобразовать элемент html в angular 5
Слайдер изображений с использованием css и javascript
Многоточие в css в четвертой строке с дополнительными сведениями с помощью css
Фиксированный элемент не работает в мобильных представлениях
Как исправить, чтобы панель навигации по умолчанию W3Schools работала?
в Chrome я вижу скриншот для FF, который вы опубликовали