svg- все статьи тега


Великолепная десятка библиотек SVG иконок

Как-то раз я провел опрос на Reddit и обратился к коллегам-разработчикам с простой просьбой: поделиться названиями любимых библиотек иконок. Идея нашла живой отклик у сообщества, и вскоре я открыл для себя много отличных библиотек с открытым исходным кодом, о которых раньше и понятия не имел. И вот я решил написать статью о 10 лучших из них на осн...

Повторная инициализация SVGweb для ajax

У меня нет проблем с использованием SVGweb, когда страница просто загружается (открывается). Как можно повторно инициализировать SVGweb, чтобы перерисовать все SVG на странице? Anotherwords мне нужен SVGweb для повторного сканирования и перезаписи всего на странице. Источник (из этого): <script type="image/svg+xml"> <svg> ... </svg> </script> К этому (как SVGweb si делает это, когда просто открывает страницу): <svg> ... </svg> Мне это нужно, ...

Проблема с динамической генерацией SVG-изображений

Я пытаюсь написать скрипт на стороне сервера (PHP) для создания образа SVG на основе пользовательского ввода. Я использую следующий код: <?php echo '<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <head><meta http-equiv="Content-Type" content="svg+xml" /></head> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" ...

SVG Clip-Path не работает в Safari

У меня есть простая анимация, которая заполняет svg снизу вверх, а затем исчезает. Заполнение производится с помощью clipPath наряду с использованием path с помощью stroke-dasharray & stroke-dashoffset. Проблема в том, что clipPath, похоже, полностью игнорируется в Safari. Я видел много других примеров и ответов на вопросы, которые успешно используют свойство clip-path в Safari, но не в этом случае. Есть какие-нибудь идеи о том, что конкретно мешает Safari правильно отрисовывать это? Ссыл ...

Очерчивание и частичное заполнение формы SVG

У меня здесь есть jsfiddle - http://jsfiddle.net/apbuc773/ Я хотел бы создать звезду, используя svg. Я хотел бы погладить внешнюю сторону звезды. В моем примере штриховка находится на каждой линии, которая рассекает внутреннюю форму. Также можно наполовину заполнить форму звезды. Я хотел бы использовать это для оценки звезд, но мне нужна половина и, возможно, четверть заполнения. <svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="f ...

Как я могу ссылаться на определение внутреннего градиента внутри символа SVG sprite?

резюме: SVG-спрайт содержит пять блоков значков <symbol>, один из которых ссылается на собственное определение градиента по идентификатору. Он больше не может найти этот градиент и отрисовывать его должным образом. JSFIDDLE: http://jsfiddle.net/Qtq24/1/ Я переключаю некоторые графики на SVG, и поскольку они являются значками (в данном случае для профилей социальных сетей) ,я хотел бы сохранить их в спрайте (как это было с PNG до). Я следовал этому руководству по SVG sprites на CSS-t ...

Как обновить цвет заливки на существующих элементах svg с помощью d3.js?

Итак, я пытаюсь сделать карту из Ан .svg-файл я создал с помощью Illustrator, потому что это карта Нидерландов с не такими простыми регионами. Все регионы имеют свой собственный # ID. Теперь я пытаюсь раскрасить каждую область в соответствии с их значением в наборе данных. Я могу заставить цвет на регионах с помощью CSS я сделал это на одном регионе, но это, очевидно, не хорошее решение. Если я, например, попытаюсь выбрать(#id), а затем изменить.attr ("заполнение", "красный"); он не делает ра ...

Как запустить svg анимацию с помощью Javascript? (Нет Jquery)

У меня есть путь линии svg, анимированный с этим образцом, который я нашел: svg{ position:absolute; width:100%; height:100%; left:0%; top:0%; display:block; background:transparent; } .path { stroke:black; stroke-dasharray: 290; stroke-dashoffset: 130; a ...

Преобразование SVG изображения в PNG с помощью PHP

Я работаю над веб-проектом, который включает динамически генерируемую карту США, раскрашивающую различные штаты на основе набора данных. Этот файл SVG дает мне хорошую пустую карту США и очень легко изменить цвет каждого штата. Сложность заключается в том, что браузеры IE не поддерживают SVG, поэтому для того, чтобы я мог использовать удобный синтаксис svg, мне нужно преобразовать его в JPG. В идеале я хотел бы сделать это только с библиотекой GD2, но также мог бы использовать ImageMagic ...

Попытка изменить цвет заливки svg при фокусировке ввода

У меня есть значок SVG рядом с полем ввода. При наведении курсора на иконку или входной сигнал они оба должны менять цвет одновременно, а при щелчке по любому из них входной сигнал должен быть сфокусирован, и оба должны оставаться цветом при наведении. Проблема, с которой я сталкиваюсь, заключается в том, что SVG не будет сохранять цвет наведения, когда вход сфокусирован. Я пробовал использовать if ($('.input').is(':focus')), но это делает меня на шаг назад в том, что он каким-то образом предот ...

Измените путь svg с помощью javascript

Существует путь SVG: <svg id="sss" viewBox = "0 0 500 300" version = "1.1"> <defs> <path id="s3" d="M 10,90 Q 100,15 200,70 "/> </defs> Как я могу изменить значение d? Почему это alert(document.getElementById('s3').d); дает мне undefined? ...

Добавление нескольких прямоугольник на элемент данных в Д3

Используя d3, я пытаюсь написать сценарий для визуализации размера числа, показывая его состоящим из отдельных блоков . Таким образом, число 5 будет состоять из 5 прямоугольников. Общий синтаксис для создания прямоугольников в svg выглядит следующим образом. var p = d3.select("body").selectAll("p") .data([5, 3, 10]) .enter() .append("rect) ... Однако то, что я действительно хочу, - это то, что добавляет несколько прямоугольников на элемент данных. var p = d3.select("body") ...

Переместить элемент вперед, не нарушая события

Я пытаюсь исправить некоторый код события, над которым работаю. В этом конкретном случае мне нужно иметь возможность подписаться на событие click на svg:circle. Однако существует также необходимость переместить окружность в верхнюю часть z-индекса на mousedown таким образом, чтобы элемент можно было перетащить поверх других элементов. Способ, которым это делается, состоит в том, чтобы извлечь элемент из DOM и повторно вставить его в нужное место, используя вспомогательную функцию, которую я исп ...

Динамическое изменение цвета изображения SVG в android

Я знаю, что используя стороннюю библиотеку, можно использовать SVG image В Android. Библиотека типа: svg-android Код для загрузки SVG-образа выглядит следующим образом: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Create a new ImageView ImageView imageView = new ImageView(this); // Set the background color to white imageView.setBackgroundColor(Color.WHITE); // Parse the SVG file from the resource SVG svg = SVGParser.get ...

Как изменить размер svg (с помощью батика) и отобразить его?

У меня есть svg-файл размером 100x100 пикселей (например). Я использую батик. Если я сделаю a: JSVGCanvas svg = new JSVGCanvas(); [...] svg.setSize(10,10); Он будет показывать только эту часть изображения, а не измененное изображение. Знаете ли вы, как я могу отобразить изображение svg с измененным размером ? Спасибо ;) ...

Удаление преобразований в файлах SVG

Я уже некоторое время борюсь с этим и, кажется, нигде не могу найти ответ (который работает). У меня есть файл SVG, который выглядит следующим образом: <svg xmlns:dc="http://purl.org/dc/elements/1.1/" ... width="72.9375" height="58.21875" ...> ... <g ... transform="translate(10.75,-308.96875)" style="..."> <path inkscape:connector-curvature="0" d="m -10.254587,345.43597 c 0,-1.41732 0.17692,-2.85384 0.5312502,-3.5625 0.7086 ...

D3.js изменить стиль линии пути оси x

В d3.на диаграммах js линия оси x (черная линия между столбиками и метками столбиков) выглядит примерно так по умолчанию: |----------------|, смотрите скриншот ниже: Как бы я изменил это на просто прямую линию (без вертикальных линий на обоих концах)? Глядя на сгенерированный SVG, этот код, кажется, определяет этот стиль: <path class="domain" d="M0,6V0H824V6"></path>, который автоматически генерируется D3. Спасибо! ...

Динамическое введение фильтров SVG и применение к HTML

Я играю с применением фильтров SVG к HTML. Это работает, если все жестко закодировано, хотя мне нужен идентификатор CSS -webkit-filter для chrome. При попытке создать элемент SVG с фильтром динамически с помощью javascript это не удается. Кто-нибудь может объяснить почему? Вот что у меня есть до сих пор: http://jsfiddle.net/H3UX8/1/ Первая пара изображений и текста размыта в chrome и firefox, а вторая - нет. Выписка не содержит работа: .dynamic div { -webkit-filter: url('#f2'); fil ...

Масштабирование приводит к выходу графика за границы области построения

У меня проблема с моим графом. Когда я увеличиваю масштаб, линия проходит по краю области холста и по оси x/Y. Я пробовал добавлять clippath, но это не похоже на работу. Если я проверю DOM в отладчике, то увижу, что прямоугольник clippath находится именно там, где ему нужно быть. //The canvasGroup is the area between the axis var clipGroup = canvasGroup.append("clipPath") .attr("id", "canvasGroup-clipPath"); var clipRect = clipGroup.append("rect") .attr("width" ...

Изменение цвета SVG при наведении на родительский элемент

У меня есть меню. Каждый пункт меню имеет изображение SVG и текст. SVG встроен с помощью <object> <ul id="menu-content" class="menu-content collapse out"> <li id="calculator"> <a href="#"> <tr> <td> <object type="image/svg+xml" data="assets/calculator.svg"> </object> </td> <td class="menu-option"> <span class="menu-option"> Pricing & Services ...