Повторный узор в элементе Рафаэля - PullRequest
Новая
       35

Повторный узор в элементе Рафаэля

3 голосов
/ 06 апреля 2011

Есть ли способ использовать повторяющийся узор в качестве фона для элемента Raphael?

В частности, можно ли наложить полупрозрачный .png поверх цвета заливки?(или альтернативой может быть наличие пути клипа (не прямоугольного) для изображения)

1 Ответ

2 голосов
/ 06 апреля 2011

Вот SVG-решение для использования шаблона повторителя в качестве фона.Вы можете продолжить свой путь оттуда.

Прежде всего создайте шаблон и в этом шаблоне поместите изображение , которое вы хотите повторить.Присвойте ID этому шаблону и используйте этот ID в качестве IRI в fill значении вашей фигуры, для которой требуется мозаика.

Чтобы также иметь фон по умолчанию, вам нужен только другойза ним совпадает фигура с фоном, который вам нужен. 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 800 400" 
    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="myTile" patternUnits="userSpaceOnUse"
             x="0" y="0" width="20" height="20"
             viewBox="0 0 20 20" >
      <image x="0" y="0" width="20px" height="20px" xlink:href="tile.png" />
    </pattern> 
  </defs>

  <rect x="0" y="0" fill="Red" width="800" height="400">
  </rect>
  <ellipse fill="url(#myTile)" stroke="black" stroke-width="5"  
        cx="400" cy="200" rx="350" ry="150" />
</svg>

Предупреждение: выполнение приведенного выше примера может повредить ваши глаза.

...