Изучаем основы SVG для оформления сцен и домашних страниц

[Bagir]

Кстати вот еще на тему заливки.

Попробуйте поиграться с цифрой 70% в этом примере. Первые два цвета дадут плавную градиентную заливку полосы. А третий цвет можно использовать как фон.

Код: Выделить всё

<svg width="405" height="105">
  <defs>
    <linearGradient id="Gradient1" x1="0" y1="0" x2="100%" y2="0">
      <stop offset="0%" stop-color="#BBC42A" />
      <stop offset="70%" stop-color="#00C42A" />
      <stop offset="0%" stop-color="#ED6E46" />
    </linearGradient>
  </defs>
  <rect x="2" y="2" width="400" height="100" fill= "url(#Gradient1)" stroke="#333333" stroke-width="4px" />
</svg> 

Можно даже в каком нибудь онлайн редакторе. Например вот. Я уже придумал как это использовать. В отличии от CSS, который для этого вероятно просто не был задуман, хоть на нем тоже можно легко сделать вертикальный или горизонтальный прогрессбар, svg позволяет легко рисовать полигоны.

[Bagir]

Подскажите, как при помощи SVG изменить размер, скажем последней цифры после точки. Я вывожу температуру так

Код: Выделить всё

<text x="20" y="40" fill="black" font-weight="bold" font-size="28px">%.airCurrentTemp%</text>

получается 21,0. Хотел бы уменьшить в размере цифру 0 без нагромождения кода.
В примере ниже можно изменить координаты четвертого символа текста т.е. сдвинуть вниз цифру 0. Но как её уменьшить не разбивая текст на две части, я пока не знаю.

Код: Выделить всё

<svg> 
 <text x="0" y="40 40 40 50">21,0</text> 
</svg>