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

на данный момент я работаю с графикой svg, чтобы отобразить «карту» сплайсинга. Когда я пытаюсь рисовать прямоугольники или дорожки с рисунком (изображением) в качестве фона, шаблон не будет использовать локальную систему координат вытянутого прямоугольника/пути, а глобальный.SVG background pattern использует глобальную, а не локальную систему координат

Это, как я определить шаблон в формате 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="http://newlini.lokal/img/svg/black_h.png"/> 
    </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

источник

2012-09-17 Tobias Golbs

Соответствующий атрибут и значение 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>

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

a longer write up of SVG patterns on Mozilla Developer Network, я привел два примера из этой статьи в this JSFiddle, чтобы можно было легко экспериментировать.

источник

2012-09-18 11:49:39 robertc

Хорошо спасибо. Я попробую сейчас. FYI: Я подготовил небольшой пример svg http://jsfiddle.net/E3wBn/ –

So. Я пробовал это по-своему, и теперь он выглядит лучше, но кажется, что изображение не повторяется. http://jsfiddle.net/2DKXn/ –

@TobiasKun Как я уже сказал в своем ответе, вы можете иметь только фиксированное количество повторений, это не черепица, как фон HTML. – robertc

Хорошо. Возможным решением этой проблемы может быть создание единственного 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>

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

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

источник

2012-09-19 10:14:31

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

ответ

Смежные вопросы