Вопросы с меткой [svg]
SVG (от англ. Scalable Vector Graphics - масштабируемая векторная графика) - язык разметки двумерной масштабируемой векторной графики, входящий в подмножество расширяемого языка разметки XML.
2,294
вопроса
1
голос
2
ответа
34
показа
Как сделать градиентную обводку символов в css? / А точнее - как сделать прозрачной внутреннюю часть символа?
Делая по макету странницу столкнулся с этим:
это даже не обводка - а оформление шрифта (обводка отсутствует).
Задача - сделать такое в css
1
голос
2
ответа
31
показ
Как мне поменять цвет svg картинки при наведении?
У меня есть svg иконки социальный сетей - вк, телеграм, инста. Также, у меня есть их более прозрачные, такие же картинки социальных сетей. Как мне сделать так, чтобы при наведении на картинку соц. ...
3
голоса
1
ответ
51
показ
Замена SVG при нажатии на неё
Товарищи, доброго дня, вечера, у кого как. Следующий вопрос: как заменить svg на другую при нажатии на неё? Нужно максимально просто.
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" ...
1
голос
2
ответа
68
показов
Как вырезать картинку по форме контура SVG
Как наложить картинку на свг не стандартной формы. Что я имею ввиду есть вот такая СВГ
<svg xmlns="http://www.w3.org/2000/svg" width="308" height="308" viewBox="0 0 308 308" fill="none">
<...
0
голосов
1
ответ
31
показ
Как при нажатии на кнопку изменить svg?
У меня есть кнопка(play). Я хочу сделать так, чтобы при нажатии на нее, поменялся svg(на паузу), при повторном же нажатии, чтобы она вернулась к прежней svg(к play). Я понимаю что это нужно ...
0
голосов
1
ответ
31
показ
При объединении файлов SVG с помощью svgutils слетает кириллица
У меня есть 2 SVG файла. В одном из них (петля мебиуса) текст написан кириллицей. Когда объединяю его с другим SVG (со штрих кодом) и открываю получившийся SVG, то текст кириллицей превращается в ...
0
голосов
0
ответов
16
показов
react: использование нескольких экспортных функций в одном файле
у меня есть файл icons.tsx в который я хочу разместить svg коды картинок:
const Icon1 = () => (
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http:...
0
голосов
0
ответов
21
показ
Как оптимизировать анимацию под браузер Firefox?
Как оптимизировать анимацию под браузер Firefox? Проблема в том что эта анимация при запуске в браузере FireFox нагружает память ПК и рендерится отрывисто. Как это можно исправить ?
.bg-wave-...
0
голосов
0
ответов
19
показов
Не отображаюся некоторые SVG-иконки из Figma
Пытаюсь вывести иконку с помощью спрайта из фигмы, но не получается. Прилагаю код. Второй символ вообще не показывается таким методом
<svg xmlns="http://www.w3.org/2000/svg">
&...
0
голосов
1
ответ
44
показа
Растянуть изображение по контейнеру
<svg viewBox="0 0 10 10" style='height:100%'>
<rect fill="rgb(93,59,174, 60%)" id="rect" x="18%" y="18%" width="64%" height="64%" rx="15"/></rect>
<clipPath id="clip"><...
0
голосов
0
ответов
18
показов
Радиус наружу в Inkscape
Каким образом, делаются радиус в обозначенной зоне?
0
голосов
1
ответ
30
показов
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-...
0
голосов
0
ответов
10
показов
svg - сделать допустимым отображение за контуром
Возможно ли в svg, сделать так, чтобы те элементы которые выходят за контур, отображались целиком. А не только в границах контура.
0
голосов
0
ответов
33
показа
Вставка svg в html через js
<svg viewbox="0 0 260 36">
<foreignobject>
<div>Текст</div>
</foreignobject>
</svg>
Трудность в том, что если svg изначально находится в html ...
0
голосов
3
ответа
32
показа
Сделать элементы блочными
.text {
background: black;
color: white;
margin-left: auto;
width: fit-content;
font-size: 14px;
padding: 10px;
white-space: nowrap;
}
foreignObject {
height: 100%;
...
0
голосов
0
ответов
34
показа
Упростить, выровнять, сделать проще
.bl {
width: 400px;
background: red;
height: 100px;
position: relative;
}
.adv {
width: 300px;
position: absolute;
right: 0;
top: 10px;
z-index: 1;
}
.adv .text {
...
5
голосов
1
ответ
68
показов
Есть ли смысл использовать SVG для такого случая
Только учусь писать на Django. Хочу сделать веб-приложение по выбору инженерного оборудования. При выборе из выпадающего списка хочу чтобы изменялась не вся схема, а только тот модуль, который изменен....
1
голос
1
ответ
59
показов
Можно ли красить отдельные элементы path SVG sprite?
Использую на сайте svg sprite и подключаю с помощью <use xlink:href="url"></div>. Столкнулся с проблемой, что нужно при ховере красить svg, и если иконка имеет сплошной цвет, то ...
0
голосов
0
ответов
32
показа
Выполнить плавную анимацию svg
.spinner {
fill: none;
stroke: rgb(255 43 43);
stroke-width: .7;
stroke-linecap: round;
stroke-dashoffset: 100.5;
stroke-dasharray: 100.5;
animation: spinner 1.5s ease-in-...
0
голосов
0
ответов
39
показов
Перенос сайта на локальном сервере в декстоп приложение
Всем привет, это наверное будетсамый странный вопрос на форуме.
История такова, пишу дипломный проект на тему данную мне учебным учреждением «Приложение «Материально-техническое обеспечение кабинетов»...
0
голосов
0
ответов
18
показов
Не привязывать элемент к конкретной разметке
svg {height: 100px}
.st {
fill: rgb(255, 0, 0, 90%) !important;
transform-origin: 3.1px 0;
transform: scaleX(-1);
transition: all .2s linear 0s;
}
.ff {fill: rgb(131 131 131) !...
0
голосов
0
ответов
32
показа
Нарисовать треугольник
<svg viewBox="0 0 10 10" version="1.1">
<rect
style="fill:#b3b3b3"
id="rect1028"
width="6.9958277"
height="1.0013908"
x="1.5020862"
y="1.488178"
rx="0"
...
0
голосов
1
ответ
35
показов
Как поменять цвет для такой SVG при наведении?
Код SVG:
<svg width="261" height="63" viewBox="0 0 261 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#...
0
голосов
0
ответов
88
показов
Есть ли способ вставить SVG в REACT по ссылке?
Есть фейковая база данных. Это массив объектов в котором лежат данные, в том числе и ссылка на SVG картинку.
Пример:
{
"id": 1,
"company": "Photosnap",
"...
2
голоса
0
ответов
47
показов
Как сделать блок который будет инверсировать цвет находящийся над ним?
Нужно сделать чтобы элемент, который будет добавляться как псевдоэлемент (в данном случае картинка) мог инверсировать цвет текста относительно своего расположения как показано на скриншоте:
1
голос
1
ответ
27
показов
Поправить изгиб
<svg width='100px'
viewBox="0 0 10 10"
inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
sodipodi:docname="рисунок-6.svg"
version="1.1"
id="svg109101"
xmlns:inkscape="http://www....
1
голос
1
ответ
50
показов
Inkscape - Разметка по x и y
Каким образом возможно сделать так, чтобы что по x что по y. Отсчет начинался от нуля?
Пытаюсь ровную окружность выполнить по центру, с этим линями и тд. Это жеть...
И возможно ли не задавать Viewbox? ...
0
голосов
1
ответ
33
показа
Как реализовать анимацию?
Как написать такую-же анимацию, как в первом блоке на сайте, что текст разъезжается? https://otherside.xyz/
Искал в интернете, всё ссылалось на использование REACT, но для меня это не выход.
0
голосов
2
ответа
36
показов
SVG - адаптировать ширину по контенту
<svg style="display:block;background: rgb(0 0 0);width: clamp(170px,20%, 300px);" viewBox="0 0 103 36">
<text x="10" y="22" fill='#fff'>Автомобиль</text>
</svg>
<br>&...
1
голос
1
ответ
27
показов
SVG - привести текст в path
Написал текст, выделил 2 первые буквы. Выбрал контур -> оконтурить объект
На выходе получается для каждой буквы создается path, а сделать так чтобы один path для 2 и более символов.
Собственно ...
0
голосов
1
ответ
31
показ
Выполнить иконку чуть меньше svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
<path d="M 22.500353,10.482272 H 5.2851745 L 12.806219,2.7788559 c 0.601069,-...
1
голос
2
ответа
25
показов
Определение щелчка по строке SVG на расстоянии <= 3 пикселей
Вот как я определяю клики по строкам SVG:
window.onmousedown = (e) => {
if (e.target.tagName == 'line') {
alert(); // do something with e.target
}
}
svg line:hover { cursor: ...
1
голос
0
ответов
40
показов
Работа с SVG, плавные анимации
Есть две SVG. Как при нажатии на них сделать плавную анимацию перетекания одной в другую? Скажем есть кнопка которая переключает светлую тему на темную и на оборот, кнопка одна и та же, но внутри ...
0
голосов
1
ответ
48
показов
Из трех объектов в 1 целый
.cnt_p {width: 200px}
<svg class="cnt_p" viewBox="0 0 36 36">
<path d="M 18.5,5.5 H 31.3 c 0.6,0 1.2,0.6 1.2,1.5 v 5.7 c 0,0.8 -0.5,1.5 -1.2,1.5 H 18.5 c -0.6,0 -1.2,-0.6 -1.2,-1.5 V 7 ...
1
голос
1
ответ
28
показов
Inkscape, преобразовать текст в объект path
Предположим написал текст в редакторе Inkscape.
Как его теперь привести в один объект, в качестве path?
Все символы что есть, объединить и сделать на выходе как один объект в виде path.
1
голос
1
ответ
22
показа
SVG + Inkscape - добавить радиусы на углах прямоугольников
<svg width="99" height="99" viewBox="0 0 36 36">
<path
id="rect135"
d="M 17.097472,5.7761733 H 30.190131 V 14.17088 H 17.097472 Z"
fill="#ff0000"
style="...
2
голоса
1
ответ
25
показов
Не выполнять анимацию когда пользователь открывает страницу
c.onclick = e => document.querySelector('.setti').classList.toggle('ani');
svg { width: 100px }
path {transform-origin: 18px 18px; animation: cog1 100ms forwards linear}
.ani path {animation: cog ...
2
голоса
2
ответа
78
показов
Выполнить анимацию вращения шестеренки svg
<script>
c.onclick = e => document.querySelector('svg').classList.toggle('ani');
</script>
.ani path{
transform-origin: 19px 19px;
transform: rotateZ(30deg);
}
svg { ...
1
голос
2
ответа
43
показа
Поворот конкретного пути в svg
.hd-quality {
position: absolute;
top: 10px;
right: 5px;
height: 9px;
width: 13px;
background-color: #f00;
border-radius: 1px;
z-index: 2;
}
<button style="height:...
3
голоса
1
ответ
21
показ
SVG animateTransform масштабирует keySplines для соответствия компоненту Y вращающегося вектора (стрелки)
Мне нужно смоделировать вращающуюся стрелку в 2D. Она должна быть синхронизирована с вращающейся синей стрелкой.
Я начал с keySplines, показанной красной стрелкой, которая давала хороший квадрант при ...
2
голоса
1
ответ
62
показа
помогите пожалуйста сделать такие фигуры через css
получится ли это реализовать через border-radius?
0
голосов
0
ответов
17
показов
Не отображается SVG иконка на IOS(Safari)
Не отображается svg на Safari, как это можно исправить? Все остальные иконки работают исправно.
<svg width="18" height="119" viewBox="0 0 18 119" fill="none" ...
0
голосов
0
ответов
15
показов
Где хранить файл sprite.svg?
Где хранить файл sprite.svg в приложении созданном с помощью react? Если я создаю файл sprite.svg в папке src и запускаю проект в режиме разработчика, приложение не может найти к нему путь. Если же ...
2
голоса
2
ответа
38
показов
Добавить к clip-path box-shadow
Нужно создать вот такой элемент на css
Создал через clip-path: clip-path: polygon(10% 20%, 0 10%, 0 0, 100% 0, 100% 100%, 0 100%, 0 30%);. Начал добавлять box-shadow, но она не появляется. Решил ...
1
голос
1
ответ
39
показов
Растянуть дочерний элемент во всю ширину и высоту SVG
.cn {
height: 300px;
width: 50%;
position: relative;
background: red;
}
svg {
width: 50%;
height: 100%;
position: absolute;
top: 0;
...
1
голос
1
ответ
28
показов
Нарисовать круг в svg
Кто может нарисовать круг под размеры viewBox="0 0 36 36", простой круг. Ни эллипсом, а под тег path.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/...
1
голос
0
ответов
22
показа
Ограничить дочерний блок svg в максимальной ширине
<style>
.container {width:30vw; height:30vh}
.arrow_b .fons {fill:#4C4C4C}
.arrow path {
fill:white;
animation-duration: 1.2s;
animation-iteration-count: infinite
...
1
голос
1
ответ
40
показов
Рисунок круга и изгиба для svg
d: path('M0,0 0,3.5 3.5,1.75z');
Это стрелка, как будет выглядеть параметр если необходим простой круг?
Возможно ли его нарисовать для тега
<circle cx="18" cy="18" r="15&...
0
голосов
0
ответов
44
показа
Что меньше нагружает пользовательский процессор
Анимация за счет svg (https://ru.stackoverflow.com/questions/1397041/Перенести-анимацию-c-css-на-svg/1397702#1397702)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/...
0
голосов
0
ответов
18
показов
wmf в png/jpg/svg средствами php/js
Кто нибудь сталкивался с таким?
В переменной лежит wmf закодированный в base64
$wmf="<img src="data:image/x-wmf;base64,...