7
голосов
Принятый
Есть ли смысл использовать SVG для такого случая
Я набросал пример, чтобы продемонстрировать как это может выглядеть. Схему нарисовал в Corel, неизменяемая часть в одном слое, модули с вариантами сгруппированы в отдельном слое. Ну а дальше ...
5
голосов
Принятый
Выполнить анимацию вращения шестеренки svg
Шестеренка "скачет" потому что неверно указан центр вращения transform-origin: 19px 19px;
Нужно transform-origin: 18px 18px;
Нахождение центра вращения
<script>
let bb = path.getBBox(...
3
голоса
Принятый
Из трех объектов в 1 целый
Это сделать можно. Для этого:
Объединяем все строки path в одну
Заменяем первую m на M у присоединенных путей, чтобы первая точка была задана в абсолютных единицах.
Задаем свойство fill-rule: evenodd
...
2
голоса
Принятый
Не выполнять анимацию когда пользователь открывает страницу
Можно добавить класс по первому нажатию, для чего третьим аргументом можно передать объект со свойством once: true. Дальше оба класса ani и ina меняются местами таким же toggle.
const setti = ...
2
голоса
Выполнить анимацию вращения шестеренки svg
Для полноты картины, приведу решение для частного случая, если нужна двухпозиционная плавная анимация: при нажатии, вращение в одну сторону, при повторном нажатии, в обратную.
Чистый transition, без ...
2
голоса
Принятый
SVG - привести текст в path
Чтобы получить один path для нескольких букв, можно воспользоваться онлайн инструментом - Google Font to Svg Path
Не включенный чекбокс Separate Characters: сгенерирует один path для двух символов &...
2
голоса
Как поменять цвет для такой SVG при наведении?
Js здесь явно лишний
body {
background-color: #000;
}
svg g path{
transition: all 0.5s ease-in-out;
}
svg:hover g path {
fill: green;
}
<svg
width="261"
height="...
2
голоса
Принятый
Inkscape, преобразовать текст в объект path
Набираем в векторном редакторе слово, например: Text
Выбираем шрифт, размер
В пункте меню выбираем: контур | оконтурить объект или
комбинация клавиш - Ctrl + Shift +C
Сохраняем в формате *.svg
...
2
голоса
Поворот конкретного пути в svg
Чтобы повернуть часть svg можно либо добавить ей id либо использовать соответствующий селектор, в данном случае я использую селектор (путь содержащий d как свойство) Помимо этого необходимо выбрать ...
1
голос
Принятый
Растянуть изображение по контейнеру
Если я правильно понял вопрос, то вы хотите сделать размер картинки, такой же как и круга (rect), если так, то всё что вам нужно, это передать такие же атрибуты как у rect для image.
Демо
<svg ...
1
голос
Принятый
svg - Задать фон под изображение
svg {height:60px}
ellipse {
cx:7.5;
cy:1.8;
ry:2;
rx:2;
fill: red;
stroke: #fff;
stroke-width: .4
}
text {
text-anchor:middle;
dominant-baseline:central;
font-...
1
голос
Принятый
Можно ли красить отдельные элементы path SVG sprite?
Например, есть svg иконка круга, цвет фона должен быть желтый, а
внутри еще один круг зеленый. Можно ли вообще красить спрайты по
отдельным элементам?
Можно окрашивать в разные цвета отдельные path ...
1
голос
Принятый
SVG + Inkscape - добавить радиусы на углах прямоугольников
#1. Сохраняете в файл с расширением *.svg
fill="none" stroke="black" Чтобы был только бордер и не мешала закраска.
<svg width="99" height="99" viewBox="0 0 36 36">
...
1
голос
Принятый
Поправить изгиб
Изменил цвета стрелок на контрастные, чтобы лучше было видно границы
фигур
После сдвига черной фигуры излом границы устранён:
Сохраненный код после Inkscape
<?xml version="1.0" encoding="UTF-...
1
голос
Принятый
Inkscape - Разметка по x и y
И возможно ли не задавать Viewbox? Лучше ли с ним или без него, не
совсем понимаю его роль...
viewBox задаёт физические размеры SVG холста и выполняет важную роль при масштабировании и без него ...
1
голос
Принятый
SVG - адаптировать ширину по контенту
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style>
.one {
color: white;
background: black;
width: fit-content;
overflow: auto;
margin:...
1
голос
Принятый
Выполнить иконку чуть меньше svg
Чтобы добавить отступы нужно отредактировать svg. Добавить внутрь пустой rect и увеличить viewport на размер отступов.
В Base64 не обязательно кодировать, чтобы добавить изображение на фон. Достаточно ...
1
голос
Определение щелчка по строке SVG на расстоянии <= 3 пикселей
Решение с одним <line> и небольшим количеством JavaScript было бы
интересным.
Мы можем использовать существующий веб-API document.elementFromPoint(x, y). Он возвращает самый верхний элемент в ...
1
голос
Определение щелчка по строке SVG на расстоянии <= 3 пикселей
Немного сложное решение, но работает:
window.onmousedown = (e) => {
if (e.target.classList.contains('line')) {
console.log(e.target.href);
}
}
svg .line:hover {
cursor: ...
1
голос
Принятый
Поворот конкретного пути в svg
Решение с помощью transition: transform .8s
При наведении шестеренка вращается по часовой стрелке, при уводе курсора,- против часовой
Для адаптивности svg обернут в родительский блок .container, ...
Only top scored, non community-wiki answers of a minimum length are eligible
Связанные метки
svg × 2287css × 1285
html × 975
javascript × 733
css3 × 362
svg-animation × 295
анимация × 285
css-animation × 244
html5 × 236
вёрстка × 227
jquery × 154
canvas × 102
svg-спрайт × 68
d3.js × 40
inkscape × 38
clip-path × 36
svg-filter × 34
android × 32
изображения × 28
smil × 27
php × 26
path × 22
xml × 21
reactjs × 19
веб-программирование × 18