LINUX.ORG.RU

svg: задать название для цвета

 


0

1

Пробую познакомиться с svg, возникло желание задать названия цветов и далее использовать. Например в следующем случае задать названия clr1 и clr2 и далее их использовать.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     width="100%" height="100%">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="10%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
      <stop offset="50%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="1024" height="1024" fill="url(#grad1)" />
</svg>
Тогда при замене цвета не нужно будет искать в структуре а можно будет внести изменение в одном месте.

Как это можно сделать? В этой же области defs, определить в <style> или задать переменными?

Кстати да, наверно AP знает.

★★★★★

Последнее исправление: sin_a (всего исправлений: 1)

Мой ответ тебе не понравится.

https://www.w3.org/TR/SVG/types.html#ColorKeywords

В новом SVG2 можно сделать через ICC-профиль с именованными цветами внутри (бывают и такие), а профиль встроить в SVG.

Возможно, есть другие решения, но я про них не знаю.

AP ★★★★★
()
Ответ на: комментарий от AP

Если ты про то, что цвет можно задавать человеческим словом, то да, не нравится. Потому что смысл в другом. Нарисовать домик на закате, а затем сменить переменные и получить домик в полдень, полночь и в тумане. При этом очевидно не хочется лазить по тексту и искать.

Пишут про css, но там более сложные примеры и как это сделать с названием цвета я не понял. А переменные оно не умеет? Выяснять что такое ICC-профиль пока пожалуй подожду.

sin_a ★★★★★
() автор топика
Ответ на: комментарий от sin_a

Похоже то что уже есть, здесь то же самое:

https://www.w3.org/TR/2009/WD-SVGParamPrimer-20090430/#Syntax

Но списал я неправильно, не работает:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     width="100%" height="100%">
  <defs>
    <ref id="color1" param="color" default="blue"/>
  </defs>

  <rect width="1024" height="1024" fill="url(#color1)" />
</svg>
sin_a ★★★★★
() автор топика
Ответ на: комментарий от sin_a

Я бы к дискуссии подключил RazrFalcon, он лучше меня кишки SVG знает.

AP ★★★★★
()

Из коробки - никак.

Есть два варианта:

1) Градиент с одним stop. Он должен интерпретироваться как заливка. Но не все рендеры это умеют.

2) css

<svg>
<style>.myfill { fill:#00913f }</style>
<rect class="myfill"/>
</svg>

RazrFalcon ★★★★★
()
Ответ на: комментарий от RazrFalcon

Не все рендеры... Твой пример не открывался корректно просмотрщиком мате, но нормально открылся когда я догадался попробовать инкскейп и нормально сконвертировался при помощи convert.

Но css, умеет только заливку или градиент тоже? Вернее не градиент, хотелось бы его не трогать, а то так-то можно и в defs поправить. Но цвет может встречаться несколько раз. Возможно в стилях задать цвет и затем его использовать?

И странно что пример с http://www.w3.org не работает. Или там только планы описаны (с 2009 года)?

sin_a ★★★★★
() автор топика
Последнее исправление: sin_a (всего исправлений: 1)
Ответ на: комментарий от sin_a

Какой код? Css? Это псевдо-код.

В mate, скорее всего, rsvg, и он должен это уметь.

Если вам нужен svg не для отображения в браузере - просто забейте. Это болото. QtSvg, rsvg, etc. Они поддерживают лишь маленькую часть SVG. Нужен SVG - браузер.

Я пытаюсь это решить, написав свой рендер, но там ещё много работы.

RazrFalcon ★★★★★
()
Ответ на: комментарий от RazrFalcon

Вот такой пример в принципе должен работать (просто я где то ошибся) или цвет так не задать?

<svg version="1.1"
  <style>
      .color1 { #00913f }
  </style>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:class=color1;stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="1024" height="1024" fill="url(#grad1)" />
</svg>

sin_a ★★★★★
() автор топика
Ответ на: комментарий от sin_a

Это даже не xml. И даже не CSS. Вы что-то своё придумали.

Вот «рабочий» вариант:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
      .color1 { stop-color:#00913f }
  </style>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" class="color1" style="stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="1024" height="1024" fill="url(#grad1)" />
</svg>

Но Inkscape и QtSvg это не понимаю.

RazrFalcon ★★★★★
()
Ответ на: комментарий от RazrFalcon

Да, это я попытался подставить стиль в свой пример плохо понимая что делаю, этот вариант работает. Действительно у меня это открыли только браузеры. И convert преобразовал неверно, видимо растр из этого не получить.

А свой рендер с каким прицелом? Для встраивания? Потому что держать отдельный просмотрщик для одного формата мало кто будет.

sin_a ★★★★★
() автор топика
Ответ на: комментарий от sin_a

И convert преобразовал неверно, видимо растр из этого не получить.

convert использует всё тот же rsvg.

Либа. Аналог rsvg.

RazrFalcon ★★★★★
()

Та-да-м: нужен шаблонизатор для SVG! Больше говна на фронтэнде всякого и разного.

Bahamut
()
Ответ на: комментарий от RazrFalcon

Было бы неплохо. Удачи. Векторная графика достаточно важна, но при разнородной интерпретации становится бесполезной.

sin_a ★★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.