Почему Edge и IE не отображают этот img-embedded-svg с текстом, который имеет расширенные символы ASCII? - PullRequest
Новая
       10

Почему Edge и IE не отображают этот img-embedded-svg с текстом, который имеет расширенные символы ASCII?

0 голосов
/ 12 марта 2020

У меня есть HTML страница с SVG в элементе img. В Chrome и Firefox отображается img-svg. Но не в Edge, а IE. Я сузил его до текста в SVG. Текст имеет расширенные символы ASCII (т.е. коды ASCII> = 128).

Здесь образец HTML

	<!DOCTYPE html>
	<html lang="en">

	<head>
	  <meta charset="utf-8">
	</head>

	<body id="easykat-app">
	  <!--  1. img-svg with extended ASCII -->
	  <img
		src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">    <text x="0" y="15">1 Çüéâ</text>   </svg>'>

	  <hr />

	  <!-- 2. img-svg with HTML Numbers -->
	  <img
		src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">    <text x="0" y="15">2 &#199; &#252; &#233; &#226; </text>   </svg>'>

	  <hr />

	  <!-- 3. img-svg with no extended ASCII -->
	  <img
		src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">      <text x="0" y="15">3 @ABCD</text>    </svg>'>

	  <hr />

	  <!-- 4. svg with  extended ASCII -->
	  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" width="50" height="50"
		xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
		<text x="0" y="15">4 Çüéâ</text></svg>

	</body>

	</html>

Здесь ожидаемый результат

expected

Проблема

  1. Edge и IE не отображают первый и второй img-svg, которые имеют текст с расширенными символами ASCII и номерами HTML. Firefox и Chrome отображают img-svg
  2. IE, кажется, не отображает img-svg.

Здесь вывод из Edge

error in edge

Здесь 1-ая проблема c img-svg 

<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">    <text x="0" y="15">1 Çüéâ</text>   </svg>'>

Я пытался использовать HTML числа, то есть 

	  <!-- 2. img-svg with HTML Numbers -->
	  <img
		src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">    <text x="0" y="15">2 &#199; &#252; &#233; &#226; </text>   </svg>'>

Опять же это работает на Chrome и Firefox, но не на Edge и IE.

4-й SVG (только элемент svg, элемент img отсутствует) отображается во всех браузерах

Кто-нибудь может помочь разобраться в этой проблеме?

Версии браузеров

  1. Edge 44.18362 .449.0
  2. IE 11.592.18362.0
  3. Firefox 73.0.1 64bit
  4. Chrome80.0.3987.132 64bit

Проверено на Windows 10 pro 64bit

1 Ответ

2 голосов
/ 13 марта 2020

IE, кажется, не отображает какие-либо img-svg.

IE строго по SVG, поэтому мы должны оптимизировать URL данных при использовании SVG в Inte rnet Explorer ,

  • Большинство браузеров снисходительно относятся к строке charset=, но это требуется для Inte rnet Explorer. Это означает, что вам нужно использовать ;charset=utf8, вместо ;utf8,.
  • Вам придется кодировать символы в процентах, которые не являются URL-безопасными. Например, от <svg> до %3Csvg%3E. Вы можете минимизировать объем кодирования в процентах, который необходимо выполнить, используя одинарные кавычки ' вместо двойных кавычек ".

Так что если вы измените 3-е img-svg на нижеследующее, оно может хорошо показать в IE: 

<img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='50' height='50' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E    %3Ctext x='0' y='15'%3E3 @ABCD%3C/text%3E   %3C/svg%3E">

Но для 1-го и 2-го svg они ' все еще не может быть отображено в IE и Edge. Похоже, что img-svg показывает, что расширенный ASCII не поддерживается в IE и Edge. Это может быть связано с движками рендеринга браузеров, например IE с использованием Trident и Edge Legacy с использованием Edge HTML, который является форком Trident. Новый Edge на основе Chromium может правильно показывать все svgs.

...