svg- все статьи тега ➜ страница 2
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 ...
Как изменить цвет изображения SVG с помощью CSS (jQuery SVG image replacement)?
это самостоятельный вопрос и ответ на удобный кусок кода, который я придумал. В настоящее время нет простого способа встроить изображение SVG, а затем получить доступ к элементам SVG через CSS. Существуют различные методы использования фреймворков JS SVG, но они слишком сложны, если все, что вы делаете, - это создание простого значка с состоянием опрокидывания. Итак, вот что я придумал, и я думаю, что это самый простой способ использовать файлы SVG на веб-сайте. Он берет свою концепцию из ранн ...
Как конвертировать SVG в PNG с помощью Image Magick?
у меня есть SVG-файл, который имеет определенный размер 16x16. Когда я использовать изображения Магике преобразовать программу, чтобы конвертировать его в PNG-файл, Затем я получаю 16х16 пикселей PNG, который является слишком маленьким: convert test.svg test.png мне нужно указать размер пикселя выходного PNG. -size параметр, кажется, игнорируется,-scale параметр масштабирует PNG после он был преобразован в PNG. Лучший результат до сих пор я получил с помощью : convert -density 1200 test.svg ...
jQuery SVG, почему я не могу добавить класс?
Я использую jQuery SVG. Я не могу добавить или удалить класс в объект. Кто-нибудь знает мою ошибку? символов: <rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" /> jQuery, который не будет добавлять класс: $(".jimmy").click(function() { $(this).addClass("clicked"); }); Я знаю, что SVG и jQuery работают вместе отлично, потому что я можете цель объекта и запустить предупреждение, когда он нажал: $(".jimmy").click(function() { alert('Handler for .click() call ...
Преобразование SVG в изображение (JPEG, PNG и др.) в браузере
Я хочу конвертировать SVG в растровые изображения (например, JPEG, PNG и т. д.) через JavaScript. ...
Встроенный SVG в CSS
можно ли использовать встроенное определение SVG в CSS? Я имею в виду что-то вроде: .my-class { background-image: <svg>...</svg>; } ...
приложение jquery не работает с элементом svg?
предполагаю, что это: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'); }); </script> </head> <body> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> </svg> </ ...
Правильный тип mime для изображений SVG со встроенными шрифтами
это обычный тип SVG mime: image/svg+xml и он отлично работает. Однако при внедрении шрифта SVG chrome сообщает вам, что тип mime неверен, очевидно, потому что вы возвращаете шрифт вместо изображения. есть ли универсальный тип mime? хром не так? это application/svg+xml принято как-то? Я думаю, что это все еще серая область в HTML5, но кто-то здесь может знать. ...
Захват подписи с помощью HTML5 и iPad
кто-нибудь знает как это можно сделать? Вы бы использовали объект canvas, svg, jQuery и т. д.? ...
Заполните элемент SVG path фоновым изображением
можно ли установить background-image для SVG <path> элемент? например, если я выберите элемент class="wall", стиль CSS .wall {fill: red;} работает, а .wall{background-image: url(wall.jpg)} нет, ни .wall {background-color: red;}. ...
Есть ли способ использовать SVG в качестве контента в псевдо-элементе: до или после
Я хочу разместить некоторые изображения SVG перед некоторыми выбранными элементами. Я использую JQuery, но это не имеет значения. Я хотел бы иметь: перед элементом, чтобы быть как: #mydiv:before { content:"<svg.. code here</svg>"; display:block; width:22px; height:10px; margin:10px 5px 0 10px; } Если я делаю это, как показано выше, он просто отображает строку. Я проверил спецификации, и, похоже, есть некоторые ограничения на то, какой контент может быть. Есть ...
Как масштабировать упрямый SVG, встроенный с тегом?
у меня есть некоторые SVG файлы, которые указывают width и height а также viewbox такой: <svg width="576pt" height="432pt" viewBox="0 0 576 432" > ... но как отобразить их в браузере в размере, который я решаю? Я хочу их поменьше и попробовал: <object width="400" data="image.svg"></object> но тогда я получаю видимые полосы прокрутки. это работает, если я изменю файлы SVG на set width и height до 100% вместо этого, но я хочу решить размер в HTML независимо от того, какие ...
Как применить стиль к встроенному SVG?
когда SVG непосредственно включен в документ с помощью <svg> тег, вы можете применить стили CSS к SVG через таблицу стилей документа. Тем не менее, я пытаюсь применить стиль к SVG, который встроен (используя <object> tag). можно ли использовать что-нибудь вроде следующего кода? object svg { fill: #fff; } ...
В чем разница между атрибутами svg x и dx?
в чем разница между атрибутами svg x и dx (или y и dy)? Когда будет подходящее время для использования атрибута смещения оси (dx) по сравнению с атрибутом местоположения (x)? например, я заметил, что многие примеры d3 делают что-то вроде этого chart.append("text") .attr("x", 0) .attr("y", 0) .attr("dy", -3) .text("I am a label") в чем преимущество или рассуждение для установки как y, так и dy, когда следующее, похоже, делает то же самое? chart.append("text") .attr("x", 0) ...
В чем разница между SVG и HTML5 Canvas?
в чем разница между SVG и HTML5 Canvas? Они оба, кажется, делают то же самое со мной. В основном, они оба рисуют векторные изображения, используя координатные точки. чего мне не хватает? Каковы основные различия между SVG и HTML5 Canvas? Почему я должен выбирать одно над другим? ...
Автоматическая линия упаковки в SVG текст
Я хотел бы, чтобы отобразить <text> в SVG что бы авто-line-wrap к контейнеру <rect> так же, как HTML текст заполняет <div> элементы. Есть ли способ сделать это? Я не хочу, чтобы позиционировать линии редко с помощью <tspan> s. ...
Как разместить и центрировать текст в прямоугольнике SVG
У меня есть следующий прямоугольник... <rect x="0px" y="0px" width="60px" height="20px"/> Я хотел бы сосредоточить слово "фантастика" внутри него. Для других прямоугольников, переносит ли svg слово, чтобы остаться в них? Я не могу найти ничего конкретного о вставке текста в фигуры, которые центрированы как по горизонтали, так и по вертикали и перенос слов. Кроме того, текст не может покинуть прямоугольник. глядя на http://www.w3.org/TR/SVG/text.html#TextElement пример не помогает поск ...