Internet Explorer не распознает CSS для элементов SVG
У меня есть карта изображений SVG со стилями наведения на ссылки.
(Подробнее о картах изображений SVG здесь.)
Все респектабельные браузеры, которые я тестировал, отображают его правильно.
В IE этого нет (сюрприз!)...
(I'm only concerned with IE11, not super-archaic versions.)
Благодаря этот ответ на аналогичный вопрос я знаю, что IE может отображать обтравочные контуры, если они являются частью разметки SVG и не добавлены с помощью стилей CSS.
В моем случае, поскольку это карта изображений, пути отсечения находятся внутри тегов привязки. Может быть, поэтому IE смущает, но я нигде не читал, что он не поддерживается.
Вот что у меня есть (подтверждена работа в Firefox, Chrome, Safari, Opera):
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<div style = "width: 480px; margin: auto;">
<svg id = "map" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 960 640">
<defs>
<filter id = "desaturate">
<feColorMatrix
type='matrix'
values = "0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 1 0 1 0 "
/>
</filter>
<style type = "text/css">
a:link,
a:visited {
opacity: 0;
}
a:hover,
a:active {
opacity: 1;
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}
.desaturated {
filter:url("#desaturate");
}
</style>
<clipPath id = "clip-path">
<polygon id = "_1" data-name = "1" points = "514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-2">
<polygon id = "_2" data-name = "2" points = "518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-3">
<polygon id = "_3" data-name = "3" points = "509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-4">
<polygon id = "_4" data-name = "4" points = "500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-5">
<polygon id = "_5" data-name = "5" points = "762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-6">
<polygon id = "_6" data-name = "6" points = "538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-7">
<polygon id = "_7" data-name = "7" points = "189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-8">
<polygon id = "_8" data-name = "8" points = "-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-9">
<polygon id = "_9" data-name = "9" points = "-10 365 227 371 466 325 216 240 -24 225 -10 365" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-10">
<polygon id = "_10" data-name = "10" points = "456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-11">
<polygon id = "_11" data-name = "11" points = "312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-12">
<polygon id = "_12" data-name = "12" points = "480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill = "none"/>
</clipPath>
<image id = "image" width = "960" height = "640" width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</defs>
<image id = "bw_img" class = "desaturated" width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
<a xlink:href = "">
<g id = "_1-2" data-name = "1">
<g clip-path = "url(#clip-path)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href = "">
<g id = "_2-2" data-name = "2">
<g clip-path = "url(#clip-path-2)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href = "">
<g id = "_3-2" data-name = "3">
<g clip-path = "url(#clip-path-3)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href = "">
<g id = "_4-2" data-name = "4">
<g clip-path = "url(#clip-path-4)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href = "">
<g id = "_5-2" data-name = "5">
<g clip-path = "url(#clip-path-5)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href = "">
<g id = "_6-2" data-name = "6">
<g clip-path = "url(#clip-path-6)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href = "">
<g id = "_7-2" data-name = "7">
<g clip-path = "url(#clip-path-7)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href = "">
<g id = "_8-2" data-name = "8">
<g clip-path = "url(#clip-path-8)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href = "">
<g id = "_9-2" data-name = "9">
<g clip-path = "url(#clip-path-9)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href = "">
<g id = "_10-2" data-name = "10">
<g clip-path = "url(#clip-path-10)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href = "">
<g id = "_11-2" data-name = "11">
<g clip-path = "url(#clip-path-11)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
<a xlink:href = "">
<g id = "_12-2" data-name = "12">
<g clip-path = "url(#clip-path-12)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"></image>
</g>
</g>
</a>
</svg>
</div>
</body>
</html>Если вы запустите фрагмент кода в вышеупомянутых браузерах, отличных от IE, вы должны увидеть, как цвета карандашей появляются при наведении курсора.
Можно ли что-то сделать по-другому, чтобы IE распознавал ссылки clip-path?
Обновлять:
Я добился некоторого прогресса. У меня есть отдельный тестовый файл, работающий в IE11!
Теперь мне просто нужно выяснить, в чем разница, которая делает или ломает его.
Ниже приведен фрагмент кода, где (1) — путь многоугольника, (2) — путь многоугольника, являющийся ссылкой, а (3) — путь обрезки многоугольника, являющийся ссылкой:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<div style = "width: 512px; height: 512px; margin: 20px auto;">
<svg id = "artwork" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 512 512">
<defs>
<clipPath id = "clip-path">
<polygon id = "hexa3" points = "316 256 196 256 136 360 196 464 316 464 376 360 316 256" fill = "none"/>
</clipPath>
</defs>
<rect id = "bg" width = "512" height = "512" fill = "#b9b8c1"/>
<a xlink:href = "#">
<g id = "clip_group">
<g clip-path = "url(#clip-path)">
<image id = "img" width = "960" height = "640" transform = "translate(24 204) scale(0.48 0.48)" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "hexa2">
<polygon points = "436 48 316 48 256 152 316 256 436 256 496 152 436 48" fill = "#c4fffb"/>
</g>
</a>
<g id = "hexa1">
<polygon points = "196 48 76 48 16 152 76 256 196 256 256 152 196 48" fill = "#eaffaf"/>
</g>
</svg>
</div>
</body>
</html>Обновление 2
Я сузил проблему до того, что IE не любит мой CSS.
Вот фрагмент, в котором ссылки на clip-path работают, но CSS закомментирован. Как только CSS снова включается, он ломается. (Фоновое изображение было удалено для простоты.)
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<div style = "width: 480px; height: 320px; margin: 20px auto;">
<svg id = "map" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 960 640">
<defs>
<!-- <style type = "text/css">
a:link,
a:visited {
opacity: 0;
}
a:hover,
a:active {
opacity: 1;
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}
</style> -->
<clipPath id = "clip-path">
<polygon id = "_1" data-name = "1" points = "514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-2">
<polygon id = "_2" data-name = "2" points = "518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-3">
<polygon id = "_3" data-name = "3" points = "509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-4">
<polygon id = "_4" data-name = "4" points = "500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-5">
<polygon id = "_5" data-name = "5" points = "762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-6">
<polygon id = "_6" data-name = "6" points = "538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-7">
<polygon id = "_7" data-name = "7" points = "189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-8">
<polygon id = "_8" data-name = "8" points = "-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-9">
<polygon id = "_9" data-name = "9" points = "-10 365 227 371 466 325 216 240 -24 225 -10 365" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-10">
<polygon id = "_10" data-name = "10" points = "456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-11">
<polygon id = "_11" data-name = "11" points = "312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-12">
<polygon id = "_12" data-name = "12" points = "480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill = "none"/>
</clipPath>
<image id = "image" width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</defs>
<!-- <use id = "bw_img" xlink:href = "#image"/> -->
<a xlink:href = "#">
<g id = "clip_1">
<g clip-path = "url(#clip-path)">
<use id = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "clip_2">
<g clip-path = "url(#clip-path-2)">
<use id = "color_img-2" data-name = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "clip_3">
<g clip-path = "url(#clip-path-3)">
<use id = "color_img-3" data-name = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "clip_4">
<g clip-path = "url(#clip-path-4)">
<use id = "color_img-4" data-name = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "clip_5">
<g clip-path = "url(#clip-path-5)">
<use id = "color_img-5" data-name = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "clip_6">
<g clip-path = "url(#clip-path-6)">
<use id = "color_img-6" data-name = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "clip_7">
<g clip-path = "url(#clip-path-7)">
<use id = "color_img-7" data-name = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "clip_8">
<g clip-path = "url(#clip-path-8)">
<use id = "color_img-8" data-name = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "clip_9">
<g clip-path = "url(#clip-path-9)">
<use id = "color_img-9" data-name = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "clip_10">
<g clip-path = "url(#clip-path-10)">
<use id = "color_img-10" data-name = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "clip_11">
<g clip-path = "url(#clip-path-11)">
<use id = "color_img-11" data-name = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
<a xlink:href = "#">
<g id = "clip_12">
<g clip-path = "url(#clip-path-12)">
<use id = "color_img-12" data-name = "color_img" xlink:href = "#image"/>
</g>
</g>
</a>
</svg>
</div>
</body>
</html>Итак, теперь мне интересно, может быть, это из-за куда, который я разместил CSS, или, может быть, определенные виды CSS не распознается IE внутри SVG. Тестирование продолжается...
На данный момент я думаю, что более уместно изменить название этого вопроса с
Как заставить Internet Explorer распознавать ссылки clip-path внутри SVG
к
Internet Explorer не распознает CSS для элементов SVG
Кроме того, IE, по-видимому, имеет «полную базовую поддержку» для <style> внутри <svg>, начиная с версии 9, согласно эта страница. Так что мне действительно интересно, что он ненавидит в мой CSS. a:hover не особо экзотический селектор...
Добавление /* <
Приемы 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 сценарий полностью изменился.
2
3
1 222
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
The answer is...
Для перехода непрозрачности в SVG IE требуется непрозрачность больше нуля!
a.hover_area:link, a.hover_area:visited {opacity: 0.001}
В противном случае он просто выбрасывает его, типа «Эй-э-э, эта невидимая штука не понадобится!» несмотря на то, что ему сказали ожидать перехода: transition-property: opacity;
Here's a snippet, working in IE11:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<div style = "width: 480px; height: 640px; margin: 20px auto;"> <!-- IE needs width AND height specified to scale the SVG inside correctly. -->
<svg id = "map" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 960 640">
<filter id = "desaturate">
<feColorMatrix
type='matrix'
values = "0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 1 0 1 0 "
/>
</filter>
<style type = "text/css">
/* <![CDATA[ */
a.hover_area:link,
a.hover_area:visited {
opacity: 0.001; /* Must be greater than 0 for IE! */
}
a.hover_area:hover,
a.hover_area:active {
opacity: 1;
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}
.desaturated {
filter:url("#desaturate");
}
/* ]]> */
</style>
<defs>
<clipPath id = "clip-path">
<polygon id = "_1" data-name = "1" points = "514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-2">
<polygon id = "_2" data-name = "2" points = "518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-3">
<polygon id = "_3" data-name = "3" points = "509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-4">
<polygon id = "_4" data-name = "4" points = "500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-5">
<polygon id = "_5" data-name = "5" points = "762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-6">
<polygon id = "_6" data-name = "6" points = "538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-7">
<polygon id = "_7" data-name = "7" points = "189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-8">
<polygon id = "_8" data-name = "8" points = "-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-9">
<polygon id = "_9" data-name = "9" points = "-10 365 227 371 466 325 216 240 -24 225 -10 365" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-10">
<polygon id = "_10" data-name = "10" points = "456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-11">
<polygon id = "_11" data-name = "11" points = "312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill = "none"/>
</clipPath>
<clipPath id = "clip-path-12">
<polygon id = "_12" data-name = "12" points = "480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill = "none"/>
</clipPath>
<image id = "image" width = "960" height = "640" width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</defs>
<image id = "bw_img" class = "desaturated" width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
<a xlink:href = "#" class = "hover_area">
<g id = "_1-2" data-name = "1">
<g clip-path = "url(#clip-path)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#" class = "hover_area">
<g id = "_2-2" data-name = "2">
<g clip-path = "url(#clip-path-2)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#" class = "hover_area">
<g id = "_3-2" data-name = "3">
<g clip-path = "url(#clip-path-3)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#" class = "hover_area">
<g id = "_4-2" data-name = "4">
<g clip-path = "url(#clip-path-4)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#" class = "hover_area">
<g id = "_5-2" data-name = "5">
<g clip-path = "url(#clip-path-5)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#" class = "hover_area">
<g id = "_6-2" data-name = "6">
<g clip-path = "url(#clip-path-6)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#" class = "hover_area">
<g id = "_7-2" data-name = "7">
<g clip-path = "url(#clip-path-7)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#" class = "hover_area">
<g id = "_8-2" data-name = "8">
<g clip-path = "url(#clip-path-8)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#" class = "hover_area">
<g id = "_9-2" data-name = "9">
<g clip-path = "url(#clip-path-9)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#" class = "hover_area">
<g id = "_10-2" data-name = "10">
<g clip-path = "url(#clip-path-10)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#" class = "hover_area">
<g id = "_11-2" data-name = "11">
<g clip-path = "url(#clip-path-11)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
<a xlink:href = "#" class = "hover_area">
<g id = "_12-2" data-name = "12">
<g clip-path = "url(#clip-path-12)">
<image width = "960" height = "640" xlink:href = "https://i.stack.imgur.com/IacTT.jpg"/>
</g>
</g>
</a>
</svg>
</div>
</body>
</html>@Deepak-MSFT Готово! ^_^ Я надеюсь, что это избавит других от необходимости тратить столько же времени, как я, на решение этой проблемы.
—
08.03.2019 10:49
Другие вопросы по теме
Векторное изображение в пикселях на ImageView после изменения инструментов сборки и конфигурации градиента?
SVG с Base64 не отображается должным образом на холсте HTML 5 в Edge в некоторых сценариях
Добавление фильтра к изображению SVG внутри другого изображения SVG
Текущие библиотеки, используемые для преобразования html + svg + css в pdf
Затухание фильтра SVG на фоновом изображении
Текст анимации SVG не отображается
Связывание одной и той же переменной между csv и json в d3
Пользователь, чтобы закрыть элемент, не может щелкнуть за его пределами, потому что он открыт поверх другого элемента, который представляет собой диаграмму SVG
IE и Edge игнорируют абсолютную позицию svg
Имитировать внешний штрих :: перед псевдоэлементами: проблема с прозрачным текстом
Похожие вопросы
Как остановить отображение html в интерфейсе?
Исправить прокрутку Bootstrap tbody с родителем
Как включить звук при нажатии на значок воспроизведения/паузы
Проблемы обратного отсчета Javascript при перезагрузке страницы
Таблица отображения PHP MYSQL со строкой действия, по которой можно щелкнуть, чтобы открыть определенный файл
Как нарисовать линию между переключателями?
Angular Material — mat-select: пользовательское заполнение переполняет родительский элемент
Значок не отображается при наведении с помощью sass
Стрелки прямоугольника радиус верхней границы границы
Холст не работает должным образом на мобильном устройстве IOS
Я пытаюсь проверить проблему с IE 11, и я могу создать проблему, но не получил никакого рабочего решения для этой проблемы. Из документации я обнаружил, что «браузеры могут вести себя по-разному, когда свойства HTML CSS установлены для элементов SVG, например, браузеры Edge и IE не реагируют на свойство высоты, в то время как Chrome делает это». Проверьте известные проблемы i.postimg.cc/d0fFfDhJ/76.png Ref: caniuse.com/#feat=svg-html