Safari неправильно рисует тени на SVG через HTML5 Canvas

Я использую холст HTML5 в проекте, и иногда мне нужно рисовать тени на SVG внутри холста. Я заметил, что по сравнению с Chrome Safari при этом делает две вещи неправильно:

Safari рисует тень на каждой отдельной фигуре в SVG
Safari обрезает части тени, выходящие за пределы SVG.

Эти проблемы можно проиллюстрировать следующим кодом:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'red'

var image = new Image();
image.src = 'https://storage.googleapis.com/card-conjurer/img/manaSymbols/0.svg';
image.onload = function() {
    context.drawImage(image, 10, 10, 100, 100);
}

<canvas id='canvas'></canvas>

Я пока не могу вставлять изображения, но вот несколько ссылок на изображения, иллюстрирующие проблему:

(это скриншоты кода выше)

Результаты Safari... довольно уродливы, как видите. Есть ли способ заставить Safari отображать SVG с тенями на холсте HTML5, как это делает Chrome?

Любая помощь будет принята с благодарностью. Большое спасибо за ваше время!

javascript svg safari html5-canvas dropshadow

20.12.2020 23:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

278

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это ошибка, вы должны сообщить об этом в баг-трекер webkit.

Хотя вы можете обойти это, сначала нарисовав изображение на втором холсте, просто чтобы растеризовать это изображение svg и использовать этот холст в качестве источника для затенения:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();
image.src = 'https://storage.googleapis.com/card-conjurer/img/manaSymbols/0.svg';
image.onload = function() {
  const off = canvas.cloneNode();
  off.getContext('2d').drawImage(image, 10, 10, 100, 100);
  context.shadowOffsetX = 10;
  context.shadowOffsetY = 10;
  context.shadowColor = 'red';
  context.drawImage(off, 0, 0);
}

<canvas id='canvas'></canvas>

Чтобы использовать один холст, нам нужно использовать трюк со смещением, но это не всегда легко сделать, поскольку для этого требуется четкое знание положения нашего рисунка:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();
image.src = 'https://storage.googleapis.com/card-conjurer/img/manaSymbols/0.svg';
image.onload = function() {
  // first pass without shadow
  context.drawImage(image, 10, 10, 100, 100);
  // set shadow offsets to the position in page of bottom-right corner
  context.shadowOffsetX = 10 + 110;
  context.shadowOffsetY = 10 + 110;
  context.shadowColor = 'red';
  // draw behind
  context.globalCompositeOperation = "destination-over";
  // draw with inverse offset, so that the image is not visible
  // but the shadow is in-screen
  context.drawImage(canvas, -110, -110);
}

<canvas id='canvas'></canvas>

21.12.2020 06:31

Другие вопросы по теме

Почему размытие svg не работает в HTML или браузере?

Анимация пылающего полигона Svg

D3 SVG Переместите масштаб, чтобы прямоугольник внутри <g> имел другой угол

Значки шрифтов bootstrap 5 svg не работают должным образом

Можно ли отображать только половину значка SVG?

Сделайте что-то вроде рисования с помощью SVG и JS

Где я ошибаюсь с feColorMatrix для инвертирования цветов?

Красная рамка в прозрачном эллипсе, если влияет непрозрачность контейнера

Можете ли вы добавить тег «abbr» в тег «текст» SVG?

Маска SVG или стиль CSS, чтобы выбить центр svg, чтобы он был прозрачным

Safari неправильно рисует тени на SVG через HTML5 Canvas

Ответы 1

Другие вопросы по теме

Похожие вопросы