Вопросы с тегом «svg»

На этот вопрос есть ответы на Stack Overflow на русском : Прозрачный текст вырезан из фонарей Есть ли способ вырезать прозрачный текст из фонового эффекта, такого как на следующем изображении, с помощью CSS? Было бы грустно потерять все драгоценное SEO из-за того, что изображения заменяют текст. Сначала я подумал о …

92 css  svg  fonts  css-shapes 

У меня есть серия прямоугольников svg (с использованием D3.js), и я хочу отображать сообщение при наведении указателя мыши, сообщение должно быть окружено полем, которое действует как фон. Они оба должны быть идеально выровнены относительно друг друга и прямоугольника (сверху и по центру). Как лучше всего это сделать? Я попытался добавить …

92 javascript  svg  d3.js  tooltip 

Могу ли я использовать преобразованный файл image.svg в качестве значка карты Google. Я преобразовывал свое png-изображение в svg, и я хочу использовать его как символ карты Google, который можно повернуть. Я уже пробовал использовать символ карты Google, но я хочу иметь значок, такой как автомобиль, человек и т.д ... Вот …

91 google-maps  google-maps-api-3  svg 

Я хочу получить данные пути SVG из глифов Font Awesome, чтобы я мог использовать их прямо как SVG в моем HTML. Я думал, что это будет так же просто, как скопировать данные пути из fontawesome-webfont.svg , но когда я использую его в своем HTML, все символы отображаются в перевернутом виде. …

89 html  svg  font-awesome 

Вот иллюстрация проблемы (проверено в Firefox и Chrome): <div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div> Запустить фрагмент кодаHide resultsРазвернуть фрагмент Посмотреть на JSFiddle Обратите внимание на дополнительное redпространство divпод синим svg. Уже пробовал устанавливать paddingи marginоба элемента 0, но безуспешно .

88 html  css  svg 

В HTML5 элементы могут иметь произвольные метаданные, хранящиеся в атрибутах XML, имена которых начинаются с data-таких, как <p data-myid="123456">. Это тоже часть спецификации SVG? На практике этот метод отлично работает для документов SVG во многих местах. Но я хотел бы знать, входит ли это в официальную спецификацию SVG или нет, …

87 svg  web-standards 

У меня такой SVG: <svg> <g> <path id="k9ffd8001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#a0a700"></path> <path id="kb8000001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="url(#k9ffb0001)"></path> </g> </svg> …

87 xml  image  svg  vector-graphics 

Как правильно получить размеры svgэлемента? http://jsfiddle.net/langdonx/Xkv3X/ Хром 28: style x client 300x100 offset 300x100 IE 10: stylex client300x100 offsetundefinedxundefined FireFox 23: "style" "x" "client" "0x0" "offset" "undefinedxundefined" Есть свойства ширины и высоты svg1, но они .width.baseVal.valueустанавливаются, только если я установил атрибуты ширины и высоты для элемента. Скрипка выглядит так: HTML …

86 javascript  svg 

Допустим, у меня есть пара составных фигур ( <g>). Я хочу иметь возможность щелкнуть и перетащить их, но я хочу, чтобы тот, который я перетаскиваю в данный момент, находился НАПЕРШЕ другого в Z-порядке, так что если я перетащу его на ДРУГОЙ, другой нужно затмить.

85 javascript  svg 

Я возился с SVG и надеялся, что смогу создавать файлы SVG в Illustrator и получать доступ к элементам с помощью Javascript. Вот SVG-файл, который запускает Illustrator (он также, кажется, добавляет кучу мусора в начало файла, который я удалил) <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" …

83 javascript  svg  raphael 

Как эффективно вывести SVG-элемент на вершину z-порядка с помощью библиотеки D3? Мой конкретный сценарий - это круговая диаграмма, которая подсвечивает (добавляя strokeк path), когда указатель мыши находится над заданной частью. Блок кода для создания моей диаграммы приведен ниже: svg.selectAll("path") .data(d) .enter().append("path") .attr("d", arc) .attr("class", "arc") .attr("fill", function(d) { return color(d.name); …

81 javascript  svg  d3.js 

Поддерживает ли Android SVG? любой пример?

79 android  svg 

У меня есть HTML-таблица, и я хочу нарисовать стрелку из одной ячейки в другую ячейку. Например, вот так: Как это можно сделать? Пример HTML: <html> <body> <table> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> </body> </html> Если вы измените размер браузера, стрелка должна остаться в …

13 javascript  html  svg 

Я хочу показать VectorDrawable в моей заставке <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/white" android:gravity="fill" /> <item android:drawable="@drawable/splash_screen" android:gravity="bottom|center" /> </layer-list> Мой SVG имеет android:width="320dp"иandroid:height="238dp" <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="320dp" android:height="238dp" android:viewportWidth="320" android:viewportHeight="238"> <group> <clip-path android:pathData="M0,0h320v238h-320z M 0,0"/> <path android:pathData="M0,143.311a160,4.476 0,1 0,320 0a160,4.476 0,1 0,-320 0z" android:fillColor="#E6E6E6"/> <path android:pathData="M245.269,94.815C245.067,94.818 244.865,94.821 244.66,94.821C244.455,94.821 244.253,94.818 …

11 android  svg  splash-screen  android-vectordrawable 

Я создал анимацию карты сокровищ, во-первых, она будет отображать путь светло-серым, но когда анимация начинается, я бы хотел, чтобы светло-серые штрихи исчезли или превратились в черный цвет, когда анимация заливки «.road» включается. изо всех сил пытаясь заставить светло-серые штрихи ".steps" исчезнуть, когда анимация заливки проходит над этой позицией. svg { …

9 css  svg