В настоящий момент я работаю с графикой svg, чтобы отобразить "карту" сплайсинга. Когда я пытаюсь рисовать прямоугольники или дорожки с рисунком (изображением) в качестве фона, шаблон не будет использовать локальную систему координат вытянутого прямоугольника/пути, а глобальный.
Вот как я определяю шаблон в svg-документе:
<defs>
<pattern preserveAspectRatio="true" patternUnits="userSpaceOnUse" height="24" width="50" y="0" x="0" id="black_h">
<image height="24" width="50" y="0" x="0" xlink:href="#" onclick="location.href='http://newlini.lokal/img/svg/black_h.png'; return false;"/>
</pattern>
</defs>
Вот как я применяю шаблон к пути:
<path style="fill: url(#black_h)" d="M324 0 L324 375 L348 375 L348 0">
Таким образом, я бы ожидал, что шаблон начинается в верхнем левом углу пути и повторяется в обоих направлениях. Но в моем примере шаблон начинается в верхнем левом углу документа svg, поэтому путь выглядит только хорошо, когда y-координата кратна 24.
У вас есть идея, где я застрял?
Спасибо заранее,
Tobi
EDIT1:
Вот небольшой пример моей проблемы в jsfiddle: http://jsfiddle.net/E3wBn/
EDIT2:
Я использовал совет от robertc и изменил свой пример svg на это:
Я также загрузил пример jpg, который показывает, как он должен выглядеть позже.