Фон SVG использует глобальную, а не локальную систему координат

В настоящий момент я работаю с графикой 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 на это:

http://jsfiddle.net/2DKXn/

Я также загрузил пример jpg, который показывает, как он должен выглядеть позже.

http://www.img-share.net/uploads/oi1IcdPBVk.jpg

Ответы

Ответ 1

Соответствующий атрибут и значение patternContentUnits="objectBoundingBox", но он может не делать именно то, что вы ожидаете. Когда вы укажете это значение, вы должны отрегулировать координаты, которые вы используете, примерно так:

<defs>
    <pattern preserveAspectRatio="true" patternContentUnits="objectBoundingBox" height="0.5" width="1" y="0" x="0" id="black_h">
         <image height="0.5" width="1" y="0" x="0" xlink:href="http://newlini.lokal/img/svg/black_h.png"/>
    </pattern>
</defs>

После этого все будет обновлено, чтобы вписаться в объект, к которому он применяется. У меня нет доступа к изображению, которое вы использовали, поэтому я не смог проверить этот код напрямую, но я сделал этот похожий пример. Обратите внимание, что при таком подходе вы в основном получаете фиксированное количество повторений, а не фиксированный размер изображения.

Там более длинная запись шаблонов SVG в Mozilla Developer Network, я привел два примера из этой статьи в этот JSFiddle, чтобы облегчить эксперименты.

Ответ 2

Ok. Возможным решением этой проблемы может быть создание единственного svg для каждого шаблона, а затем включение его в "главный" svg. Я никогда не пробовал, но, возможно, это подойдет.

Тем не менее мы (разработчик и я) решили использовать LinearGradients из-за временного давления:

<linearGradient id="black_h" y2="100%" x2="0%" y1="0%" x1="0%">
     <stop style="stop-color:#555555;stop-opacity:1" offset="0%">
     <stop style="stop-color:#1E1E1E;stop-opacity:1" offset="100%">
</linearGradient>

Он работает как шарм:)

Спасибо всем за ваши предложения и помощь!