Как создать символы SVG, которые имеют изменяемый цвет заливки, цвет обводки и ширину обводки?

Я хочу создать некоторые символы SVG для Qgis, используя Inkscape, эти символы должны иметь атрибуты, как описано в вопросе. В течение последних двух дней я экспериментировал в соответствии с инструкциями Sourcepole и подражал некоторым символам, поставляемым в комплекте с qgis, которые имели желаемые атрибуты без какого-либо успеха.

Наконец, я экспериментировал с простейшей формой символа: я создал SVG, который содержит только круг в Inkscape, и попытался изменить его.

Исходный файл ( circle.svg ) имеет следующую строку:

<path
   sodipodi:type="arc"
   style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.01988637;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"

Я изменил это в:

<path
   sodipodi:type="arc"
   style="fill:param(fill) #ffffff;fill-opacity:1;stroke:param(outline) #000000;stroke-width:param(stroke-width) 1.01988637;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"

Сохранено как circle_modified.svg и выбрано в качестве символа точки, но Qgis не может изменить все три параметра одновременно.

Что я сделал не так или должен поступить иначе?

Моя система: Qgis 1.8.0 в 64-битной Ubuntu 12.04, Inkscape 0.48, текстовый редактор Gedit 3.4.1.

Для создания SVG символов с изменяемым цветом заливки , цветом обводки и шириной штриха в QGIS, вы должны заменить стиль атрибут из пути элемента с этими 3 атрибутами:

• fill = "param (fill) #FFF"
• обводка = "парам (контур) # 000"
• ход-ширина = "параметр (контур-ширина) 1"

Если вы используете InkScape, после записи нового файла SVG отредактируйте файл и замените всю строку, начиная со стиля:

style="fill:#00a000;fill-opacity:1;stroke:#000000;stroke-width:1;(...)"

со следующей строкой:

fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"

Кажется, стоит дать простой ответ об основах SVG, чтобы дополнить детали, представленные здесь, об особенностях программного обеспечения ...

Файл SVG - это просто текстовый файл. Конец файла будет .svg, но его можно открыть в текстовом редакторе так же, как файл с окончанием .txt.

Простой SVG-файл выглядит примерно так:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- This is a comment -->

<g id="group1">
<title>My group</title>
<rect id="rectangle1" height="29" width="27" y="50" x="57" stroke-width="1.5" stroke="#000" fill="#ff0"/>
<ellipse ry="17" rx="16" id="circle1" cy="64" cx="113.5" stroke-width="1.5" stroke="#999" fill="#aaa"/>
<path id="path1" d="m56.5,97l51.5,1l5,25l-29,-5l-27.5,-21z" stroke-width="1.5" stroke="#f00" fill="#fff"/>
</g>
</svg>

В этом вы можете видеть, что цвета определяются параметрами (где точки заменяются символами от 0 до 9 или AF):

stroke=#...
fill=#...

И ширина хода определяется

stroke-width="..."

Следующее может быть добавлено с помощью текстового редактора, чтобы заменить любые определенные значения, которые вы выбираете в SVG ..., позволяя устанавливать значения в QGIS. QGIS понимает значение для «param (fill)» - и другие значения «param (...)» - так как они устанавливаются самой QGIS.

Цвет заливки: fill="param(fill) #FFF"

Цвет контура / линии: stroke="param(outline) #000"

Контур / ширина линии: stroke-width="param(outline-width) 1"

Заполните непрозрачность: fill-opacity="param(fill-opacity)"

Непрозрачность контура / линии: stroke-opacity="param(outline-opacity)"

Обратите внимание, что ничто не мешает вам использовать значения 'param (...)' в немного странных местах - например, вы можете использовать значение 'param (fill-opacity)', чтобы определить цвет заливки в одном бите Файл SVG, но цвет обводки / линии в другом бите SVG.

В диалоговом окне QGIS composer или style style настройки для цветов SVG довольно очевидны. Непрозрачность заливки и обводки / линий задается как часть настроек цвета. Настройка ширины обводки / линии очевидна.

Наконец два очка

Во-первых, обратите внимание, что в SVG можно определить цвета как набор атрибутов, например:

style="fill:none;fill-opacity:1;stroke:#000000;"

Похоже, что это не работает должным образом, если вы включаете параметры, как описано здесь.

Во-вторых, при использовании программного обеспечения, такого как Illustrator или Inkscape, многие дополнительные атрибуты могут быть добавлены в текст SVG этим программным обеспечением. Если вы знаете, что делаете и понимаете основы SVG, как указано выше, это может упростить жизнь, если вы избавитесь от этого дополнительного текста. В частности, вы можете обнаружить, что цвета задаются с помощью определения стилей, а не элемента за элементом.

Я также хотел сделать это с тех пор, как вчера узнал, как добавить символы SVG , но все они были черными. Ответ от jgrocha работает - я хотел бы проголосовать, но, только что присоединившись к форуму ГИС, мне нужно сначала получить некоторую репутацию!

Я также нашел эту страницу, которая подтверждает ответ: SVG СИМВОЛЫ В QGIS С ИЗМЕНЯЕМЫМИ ЦВЕТАМИ

Чтобы иметь возможность изменить цвета маркера, мы должны добавить заполнители «param (fill)» для цвета заливки, «param (контур)» для цвета контура и «param (outline-width)» для ширины обводки. За этими заполнителями необязательно может следовать значение по умолчанию:

<svg width="100%" height="100%">
  <rect fill="param(fill) #ff0000" stroke="param(outline) #00ff00" stroke-width="param(stroke-width) 10" width="100" height="100">
  </rect>
</svg>`

Благодарность!

У меня тоже была такая же проблема, но после некоторых попыток она наконец заработала. Я пишу здесь процедуру, надеясь, что она поможет. Я создал простую спираль в Inkscape и сохранил ее как SVG. Затем я открыл его в текстовом редакторе (например, Notepad ++), и в моем коде svg дважды появилась запись «style». Сначала в этом куске:

<linearGradient
   id="linearGradient6172"
   osb:paint="solid">
  <stop
     style="stop-color:#000000;stop-opacity:1;"
     offset="0"
     id="stop6174" />
</linearGradient>

И тогда здесь:

<path
   sodipodi:type="spiral"
   style="fill:none;fill-rule:nonzero;opacity:1;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:35;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round"
   id="path4686" />

Чтобы код работал, чтобы иметь редактируемую спираль svg в qgis, я полностью удалил первую запись «style» из первого фрагмента кода:

<linearGradient
   id="linearGradient6172"
   osb:paint="solid">
</linearGradient>

И замените вторую запись «style» во втором фрагменте кода следующим образом:

<path
   sodipodi:type="spiral"
   fill="param(fill) #000" stroke="param(outline) #FFF" stroke-  width="param(outline-width) 1"
   id="path4686" />

«# 000» и «#FFF» - это два цвета по умолчанию для заливки и контура, а «1» - это ширина контура по умолчанию, если не указано иное. После сохранения этих изменений вы можете сохранить svg в правильном пути, указанном QGis (в зависимости от версии его можно найти в меню «Настройки» -> «Параметры» -> «Пути SVG»). Наконец, ваш новый объект SVG появится среди других объектов по умолчанию, и он будет доступен для редактирования.

Надеюсь, что это может помочь

Я собираюсь остановиться на этом, потому что мне потребовалось некоторое время, чтобы заставить его работать. Сделайте ваш символ и сохраните его как Inkscape SVG и откройте в текстовом редакторе. В нижнем блоке кода вы увидите; style = "fill: # 00a000; непрозрачность заполнения: 1; обводка: # 000000; ширина обводки: 1; (...)" Заменить эту строку на; fill = "param (fill) #FFF" stroke = "param (outline) # 000" stroke-width = "param (outline-width) 1" В моих файлах SVG линия стиля отображается для каждого объекта или фигуры в svg и замена этих строк не работает для меня; но работа в нижней части Inkscape SVG работала. Я опробовал свое решение и указания здесь на оптимизированных и простых форматах SVG, но это не сработало, надеюсь, это поможет. Inkscape 0.48, QGIS 2.12.0, NotePad ++

Это кажется проблемой, если мы используем точное значение. Каждый раз, когда мы открываем опции, отдельные значения цвета или обводки сбрасываются на значения в SVG. Это можно исправить, установив значение в дополнительных параметрах. Мои тесты показали, что было бы лучше использовать fill="param(fill)"вместо fill="param(fill) #FFF"SVG и т. Д.

Еще один интересный обходной путь: если у вас есть SVG с цветом переднего плана и фона, вы можете использовать цвет обводки в качестве фона заливки. Обратите внимание, тогда вы не можете использовать отдельный цвет контура для всего SVG.

Спасибо вам всем. Здесь есть несколько отличных советов, и они указали мне правильное направление, но ни один не решил мою конкретную проблему, поэтому я добавлю то, что я понял, в банк. Поскольку, похоже, нет правильного ответа для каждого случая, я хотел бы сначала предложить предложение для проверки ваших результатов как можно быстрее.

Быстрое редактирование Тестирование

• Временно переместите все ваши значки SVG из папки QGIS SVG.
• Сделайте копию файла svg, с которым вы хотите работать только для чтения, чтобы не перезаписывать его, и поместите редактируемую версию в папку QGIS svg.
• Откройте QGIS, загрузите точечный слой для работы, откройте свойства слоя и выберите «Маркер SVG».
• Вы можете дополнительно щелкнуть правой кнопкой мыши файл SVG и временно установить для программы «Открыть с помощью» по умолчанию значение «Блокнот», чтобы дважды щелкнуть по ним, чтобы отредактировать в «Блокноте».

С помощью этой настройки вы можете сразу увидеть, как QGIS реагирует на ваши изменения. Оставьте файл svg открытым в Блокноте и панель свойств в QGIS. Чтобы проверить результаты редактирования, просто нажмите Ctrl + S, чтобы сохранить его в Блокноте и переключиться на QGIS. Чтобы перезагрузить SVG, измените тип слоя символов на что-нибудь еще, затем верните его обратно в маркер SVG. Там также есть только один, так что у вас нет проблем с его поиском. Я очень быстро проверил десятки правок. Если у вас возникли проблемы с возвратом svg в исходную форму после редактирования, вы можете просто удалить его и сделать еще одну копию.

Создание SVG Icon Editable

Проблема, с которой я столкнулся, заключалась в том, что на конкретном значке, над которым я работал, нигде не было слов «стиль» или «заливка», поэтому я не мог понять, куда поместить строку параметра. Уловка Inkscape, описанная Мартиной, решила эту проблему, но у меня есть куча из них, и я не хотел открывать и сохранять каждый в Inkscape, поэтому я решил попробовать методом проб и ошибок. Глядя на код, я увидел, что информация о версии и метаданные были вверху, а инструкции формы были внизу заключены в кавычки, которые были ограничены в начале <g><path d=(некоторые имеют <g><g><path d=), а в конце - /></g></svg>. После небольшого эксперимента я выяснил, что размещение строки параметров между pathиd=работал, но значок был невидимым на панели выбора, а значок на панели предварительного просмотра вверху был полностью залит черным. Кажется, проблема с невидимым значком была ошибкой. Я исправил это, добавив параметр непрозрачности, который я опишу ниже. Оказалось, что черная заливка была только потому, что значок был только 4 мм, и он был заполнен только контуром. Чтобы это исправить, я увеличил размер значка до 10 мм (в QGIS) и уменьшил контур до 0,1 (в Блокноте).

Резюме

Если ваша иконка нигде не содержит слов «стиль» или «заливка», но у нее есть эта строка <g><path d=(или <g><g><path d=) прямо перед инструкциями формы, вы сможете добавить параметры редактирования, заменив вышеуказанную строку на<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

Если граница слишком толстая, вы можете уменьшить ее, изменив последнее число на дробь, например <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

Если вы хотите сделать свой значок полупрозрачным, вы можете сделать это, изменив приведенную выше строку на эту <g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=. Значение непрозрачности может быть от 1 (полностью непрозрачное) до 0 (полностью прозрачное), и вы можете использовать сотые или даже тысячные для дополнительной точности (например, 0,01). То же правило относится к толщине границы.

Если у вас есть много их для редактирования, вы можете найти пакетные файлы здесь, в StackExchange, чтобы автоматизировать процесс поиска и замены.