Конфигуратор плиток на моем сайте (cas.berfect.de/2.php) создает шаблоны плиток с использованием SVG. Все отображается правильно во всех распространенных браузерах. Но это не работает в Internet Explorer.
Я заметил, что IE не понимает такие теги, как «Символ» и «Использование». Поэтому я воспользовался библиотекой Polyfill "svgforeverybody.js". Он преобразует элементы «Symbol» в элементы «Rect», но Shadow DOM по-прежнему отсутствует. Как я могу заставить мое приложение работать в Internet Explorer?
Вот код:
<defs class="">
<symbol id="tile" onclick="holstClick(this, 'select');" class="">
</symbol>
<symbol id="tile_90" class="">
<use href="#tile" x="0" y="0" transform="rotate(90, 70.85, 70.85)" class=""></use>
</symbol>
<symbol id="tile_90_r" class="">
<use href="#tile" x="0" y="0" transform="translate(141.7, 0) scale(-1 1) rotate(90, 70.85, 70.85)" class=""></use>
</symbol>
<symbol id="tile_180" class="">
<use href="#tile" x="0" y="0" transform="rotate(180, 70.85, 70.85)" class=""></use>
</symbol>
<symbol id="tile_r" class="">
<use href="#tile" x="0" y="0" transform="translate(141.7, 0) scale(-1 1)" class=""></use>
</symbol>
<symbol id="tile_180_r" class="">
<use href="#tile_r" x="0" y="0" transform="rotate(180, 70.85, 70.85)" class=""></use>
</symbol>
<symbol id="tile_270" class="">
<use href="#tile" x="0" y="0" transform="rotate(270, 70.85, 70.85)" class=""></use>
</symbol>
<symbol id="tile_270_r" class="">
<use href="#tile" x="0" y="0" transform="translate(141.7, 0) scale(-1 1) rotate(270, 70.85, 70.85)" class=""></use>
</symbol>
<symbol id="tile-block" width="290" height="290" class="">
<use href="#tile_r" x="145" y="0" class=""></use>
<use href="#tile" x="0" y="0" class=""></use>
<use href="#tile_180" x="145" y="145" class=""></use>
<use href="#tile_180_r" x="0" y="145" class=""></use>
</symbol>
<symbol id="tile-line" class="">
<use href="#tile-block" x="2610" y="0" class=""></use>
<use href="#tile-block" x="2320" y="0" class=""></use>
<use href="#tile-block" x="2030" y="0" class=""></use>
<use href="#tile-block" x="1740" y="0" class=""></use>
<use href="#tile-block" x="1450" y="0" class=""></use>
<use href="#tile-block" x="1160" y="0" class=""></use>
<use href="#tile-block" x="870" y="0" class=""></use>
<use href="#tile-block" x="580" y="0" class=""></use>
<use href="#tile-block" x="290" y="0" class=""></use>
<use href="#tile-block" x="0" y="0" class=""></use>
</symbol>
<symbol id="layer-0" class="">
<use href="#tile-line" x="0" y="2610" class=""></use>
<use href="#tile-line" x="0" y="2320" class=""></use>
<use href="#tile-line" x="0" y="2030" class=""></use>
<use href="#tile-line" x="0" y="1740" class=""></use>
<use href="#tile-line" x="0" y="1450" class=""></use>
<use href="#tile-line" x="0" y="1160" class=""></use>
<use href="#tile-line" x="0" y="870" class=""></use>
<use href="#tile-line" x="0" y="580" class=""></use>
<use href="#tile-line" x="0" y="290" class=""></use>
<use href="#tile-line" x="0" y="0" class=""></use>
</symbol>
<symbol id="border" onclick="holstClick(this, 'select');" class=""></symbol>
<symbol id="border_r_rt" class="">
<use href="#border" x="0" y="0" transform="translate(141.7, 0) rotate(180 145 71)" class=""></use>
</symbol>
<symbol id="border_r_rt_flip" class="">
<use href="#border" x="0" y="0" transform="translate(0, 0) rotate(0 145 71)" class=""></use>
</symbol>
<symbol id="border_r" class="">
<use href="#border" x="0" y="0" transform="translate(141.7, 0) scale(-1 1)" class=""></use>
</symbol>
<symbol id="border_r_object" class="">
<use href="#border_r_rt" x="0" y="0" class=""></use>
</symbol>
<symbol id="border_2_tile" class="">
<use href="#border" x="0" y="0" class=""></use>
<use href="#border_r_object" x="145" y="0" class=""></use>
</symbol>
<symbol id="border_2_tile_hr" class="">
<use href="#border_r_object" x="0" y="0" class=""></use>
<use href="#border" x="145" y="0" class=""></use>
</symbol>
<symbol id="border_2_tile_hr_2" class="">
<use href="#border_r_object" x="0" y="0" class=""></use>
<use href="#border" x="145" y="0" class=""></use>
<use href="#border" x="0" y="0" transform="translate(141.7, 0) rotate(45 145 71)" class=""></use>
</symbol>
<symbol id="border_line_2_tile" class="">
<use href="#border_2_tile" x="0" y="0" class=""></use>
</symbol>
<symbol id="border_line" class="">
<use href="#border_line_2_tile" x="2610" y="0" class=""></use>
<use href="#border_line_2_tile" x="2320" y="0" class=""></use>
<use href="#border_line_2_tile" x="2030" y="0" class=""></use>
<use href="#border_line_2_tile" x="1740" y="0" class=""></use>
<use href="#border_line_2_tile" x="1450" y="0" class=""></use>
<use href="#border_line_2_tile" x="1160" y="0" class=""></use>
<use href="#border_line_2_tile" x="870" y="0" class=""></use>
<use href="#border_line_2_tile" x="580" y="0" class=""></use>
<use href="#border_line_2_tile" x="290" y="0" class=""></use>
<use href="#border_line_2_tile" x="0" y="0" class=""></use>
</symbol>
<symbol id="border_line_90" class="">
<use href="#border_line" x="0" y="0" transform="rotate(90, 143, -1.5)" class=""></use>
</symbol>
<symbol id="border_line_180" class="">
<use href="#border_line" x="2612" y="-143" transform="rotate(180, 2610, 0)" class=""></use>
</symbol>
<symbol id="border_line_270" class="">
<use href="#border_line" x="-2610" y="-145" transform="rotate(270, 143, -1.5)" class=""></use>
</symbol>
<symbol id="border_4line" class="">
<use href="#border_line" x="0" y="725" class=""></use>
<use href="#border_line_270" x="290" y="0" class=""></use>
<use href="#border_line_90" x="2465" y="0" class=""></use>
<use href="#border_line_180" x="0" y="2030" class=""></use>
</symbol>
<symbol id="border_4line_vr" class="">
<use href="#border_line" x="0" y="2030" class=""></use>
<use href="#border_line_270" x="2465" y="0" class=""></use>
<use href="#border_line_90" x="290" y="0" class=""></use>
<use href="#border_line_180" x="290" y="725" class=""></use>
</symbol>
<symbol id="layer-border" class="">
<use href="#border_4line_vr" x="0" y="0" class=""></use>
</symbol>
<symbol id="border_angle" class=""></symbol>
<symbol id="border_angle_180" class="">
<use href="#border_angle" x="0" y="0" transform="rotate(180, 70.85, 70.85)" class=""></use>
</symbol>
<symbol id="border_angle_90" class="">
<use href="#border_angle" x="0" y="0" transform="rotate(90, 70.85, 70.85)" class=""></use>
</symbol>
<symbol id="border_angle_270" class="">
<use href="#border_angle" x="0" y="0" transform="rotate(270, 70.85, 70.85)" class=""></use>
</symbol>
<symbol id="layer_border_angle" class="">
<use href="#border_angle_180" x="290" y="725" class=""></use>
<use href="#border_angle_270" x="2465" y="725" class=""></use>
<use href="#border_angle" x="2465" y="2030" class=""></use>
<use href="#border_angle_90" x="290" y="2030" class=""></use>
</symbol>
<symbol id="over_border_line" onclick="holstClick(this, 'select');" class="">
<rect fill="#FFF" width="145" height="145" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="145" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="290" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="435" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="580" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="725" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="870" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="1015" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="1160" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="1305" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="1450" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="1595" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="1740" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="1885" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="2030" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="2175" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="2320" class=""></rect>
<rect fill="#FFF" width="145" height="145" x="2465" class=""></rect>
</symbol>
<symbol id="over_border_line_90" class="">
<use href="#over_border_line" x="0" y="0" transform="rotate(90, 143, -1.5)" class=""></use>
</symbol>
<symbol id="layer_over_border" class="">
<use href="#over_border_line_90" x="146" y="0" class=""></use>
<use href="#over_border_line_90" x="2610" y="0" class=""></use>
<use href="#over_border_line" x="0" y="577" class=""></use>
<use href="#over_border_line" x="0" y="2175" class=""></use>
</symbol>
</defs>
<use href="#layer-0" x="0" y="0" width="100000" height="100000" class=""></use>
<use href="#layer-border" x="0" y="0" width="100000" height="100000" class=""></use>
<use href="#layer_border_angle" x="0" y="0" width="100000" height="100000" class=""></use>
<use href="#layer_over_border" x="0" y="0" width="100000" height="100000" class=""></use>
</svg>