Articles of svg

CSS-анимация не работает для svg в

Я пытаюсь анимировать SVG в теге image / object, но он не работает svg { width: 100%; height: 200px; } .rotate-45 { transform-origin: center; transform: rotate(45deg); } .rotate { transform-origin: center; animation: rotate 1s ease-in-out infinite; } .rotate-back { transform-origin: center; animation: rotate 1s ease-in-out infinite; animation-direction: alternate; } .left { animation: move 1s ease-in-out […]

Позиционирование пути SVG

Я делаю лицо SVG. Невозможно установить бровь на нужное место. Пожалуйста посоветуй.

Тег не обновляется, когда его атрибут данных изменяется в Chrome

У меня есть на веб-странице, чей атрибут data изменен программно в JS (jQuery, в частности). Тег data всегда указывает на изображение SVG. В Firefox, когда тег data изменен, новые загрузки SVG и все соответствующие события срабатывают. В Chrome это происходит не до тех пор, пока я не нажму на canvas SVG – как только это […]

Мое фоновое изображение обрезается внизу

Мой сайт должен быть отзывчивым, и я должен создать его «mobile-first». Это сайт на одну страницу, и каждый раздел делится на изображение svg. До сих пор я добился того, чтобы ширина была максимально изменена, используя background-size:cover; но небольшая часть в нижней части изображения отключается. Я попытался настроить высоту (авто, 100%, случайное значение пикселя), но это, […]

граница для столбчатой ​​диаграммы стека d3 при выборе

Попытка реализовать границу для выбранного столбца в гистограмме стека d3. Здесь верхняя граница первого бара немного отстает от второго бара. Как этого избежать? var svg, height, width, margin, parentWidth, parentHeight; // container size parentWidth = 700; parentHeight = 500; margin = {top: 50, right: 20, bottom: 35, left: 30}; width = parentWidth – margin.left – […]

Предотrotation поворота текста SVG с помощью CSS

Я создал SVG-круг с текстовым элементом внутри. Я хочу повернуть SVG с помощью CSS-преобразования, но я не хочу, чтобы текстовый элемент вращался. .progress { webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .progress__value { stroke-dasharray: 339.292; stroke-dashoffset: 339.292; } 30%

Скрытие элемента SVG в HTML без отключения путей клипов, определенных внутри?

Что касается ссылки на клип- вопрос, который не работает в SVG-спрайте , кажется, мы не можем использовать style=”display:none” чтобы скрыть элемент SVG, который определяет путь клипа, который будет использоваться в другом месте. Однако предложенная альтернатива для скрытия данных (с использованием width=”0″ height=”0″ ) не работает для меня (по крайней мере, в Chrome, элемент SVG по-прежнему […]

Анимация бровей с помощью SVG-пути

Я пытаюсь анимировать брови с помощью SVG. Но застрял, поскольку я не получаю надлежащего учебника, показывающего смысл и использование чисел, используемых в path=”” (пожалуйста, поделитесь ссылкой с учебником, если вы знаете какой-либо). Кто-нибудь, пожалуйста, помогите мне с поднятием бровей смайлика. Вот мой код Я старался следовать. Извините за плохой код: P

SVG не использует шрифт, если внутри HTML

У меня есть SVG, который отлично отображается в Chrome, но когда я использую его на HTML-странице, он не использует правильный шрифт, вместо этого использует значение по умолчанию. TEST SVG отображается в Chrome, но при отображении на HTML-странице он не использует правильный шрифт. Что мне не хватает? Добавление. Хотя действительное решение было предложено ниже, я обнаружил, […]

Добавление SVG, который имеет 3 пути к части .innerHTML кнопки

Я пытаюсь добавить SVG который имеет 3 пути к коду кнопки. Я знаю, как делать One Path, но делая несколько, я смущен тем, как это сделать. Мне нужна помощь в добавлении SVG в часть .innerHTML кода. Вся помощь будет принята с благодарностью. https://jsfiddle.net/hnhqtb4u/2/ Играть: Пауза: Ниже приведен код, который я использую. Код кнопки: