Як створити символи 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 на Ubuntu 12.04 64 біт, Inkscape 0.48, текстовий редактор Gedit 3.4.1.

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

• 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 вчора , але всі вони були чорними. Відповідь, яку дає jgrocha, працює - я хотів проголосувати за неї, але щойно приєднавшись до форуму GIS, мені потрібно отримати репутацію першим!

Я також виявив цю сторінку, яка підтверджує відповідь: SVG-СИМВОЛИ В QGIS З МОДИФІКАЦІЙНИМ КОЛЬОРОМ

Щоб мати можливість змінити кольори маркера, ми повинні додати «парам (заливку)» для кольору заливки, «парам (контур)» для кольору контуру та «парам (ширина контуру)» для ширини штриха. Ці заповнювачі необов'язково можуть супроводжуватися значенням за замовчуванням:

<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>`

Спасибі!

Мабуть, варто надати просту відповідь про основи 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 налаштування кольорів SVG досить очевидні. Непрозорість заливки та обведення / рядка встановлюється як частина кольорових налаштувань. Установка ширини ходу / лінії очевидна.

Нарешті два бали

По-перше, зауважте, що, перебуваючи в SVG, справедливо визначати кольори як колекцію таких атрибутів:

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

Здається, це не працює належним чином, якщо ви включаєте параметри, як описано тут.

По-друге, при використанні програмного забезпечення на зразок Illustrator або Inkscape за допомогою цього програмного забезпечення в текст SVG можна додавати багато додаткових атрибутів. Якщо ви знаєте, що ви робите, і розумієте основи SVG, як вище, це може зробити життя простішим, якщо ви позбудетесь цього додаткового тексту. Зокрема, ви можете виявити, що кольори задаються через визначення стилів, а не за пунктом за пунктом.

У мене також була така ж проблема, але після деяких спроб вона нарешті спрацювала. Я пишу тут процедуру, сподіваючись, що вона допоможе. Я створив просту спіраль у Inkscape і зберег її як svg. Потім я відкрив її в текстовому редакторі (наприклад, Блокнот ++), і запис "стиль" відбувся двічі в моєму кодексі svg. Спочатку в цьому куску:

<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, я повністю видалив перший "стиль" запису з першого фрагмента коду:

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

І замінити другий запис "стиль" у другому фрагменті коду таким чином:

<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; fill-opacity: 1; stroke: # 000000; width-width: 1; (...)" Замініть цей рядок на; fill = "param (fill) #FFF" stroke = "param (контур) # 000" stroke-width = "param (контур-ширина) 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 редагованим

Проблема, яку я мав, полягала в тому, що конкретний значок, над яким я працював, ніде не мав слів "стиль" або "заливка", тому у мене виникли проблеми з розумінням, куди слід поставити рядок параметра. Описаний Мартиною трюк Inkscape вирішив цю проблему, але у мене є маса їх, і я не хотів відкривати та зберігати кожен у Inkscape, тому я вирішив спробувати пробну помилку та помилку. Дивлячись на код, я міг бачити, що інформація про версію та метадані знаходяться вгорі, а вказівки щодо форми внизу містяться у лапках, які були обмежені на початку <g><path d=(деякі мають <g><g><path d=) та в кінці - /></g></svg>. Після невеликого експерименту я зрозумів, що ставити параметр між pathіd=працював, але значок був невидимий на панелі вибору, а піктограма на панелі попереднього перегляду вгорі була повністю заповнена чорним кольором. Невидима проблема із значками, здається, була помилкою. Я виправив це, додавши параметр непрозорості, який я опишу нижче. Виявилося, що чорна заливка була лише тому, що ікона була лише 4 мм, і її заповнили лише контури. Щоб виправити це, я зіткнувся з розміром значка до 10 мм (у QGIS) і зіткнувся з контуром до 0,1 (у Блокноті).

Підсумок

Якщо у вашому піктограмі немає місця "style" або "fill", але у нього є цей рядок <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, щоб автоматизувати процес пошуку та заміни.