SVG вращать один объект на две точки - PullRequest
Новая
       10

SVG вращать один объект на две точки

0 голосов
/ 26 апреля 2020

У меня следующая проблема:

В моем приложении я могу определить контейнер изображений. Если я поверну контейнер, изображение внутри контейнера также будет повернуто (конечно). Но я также могу повернуть изображение внутри контейнера. Таким образом, изображение будет поворачиваться дважды: сначала по центру изображения-контейнера, если я поверну контейнер, а затем по центру изображения, если я поверну изображение.

Возможно ли справиться с этой ситуацией в SVG?

Спасибо и будьте здоровы, Рюдигер.

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Может быть что-то вроде этого: 

<?xml version='1.0'?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <pattern id="pattern1" width="336.4" height="254.8" patternUnits="userSpaceOnUse">
            <image x="20" y="20" width="326.4" height="244.8" xlink:href="http://bigdaddylin:8880/webdav/pools/image/ahires/52H.jpg" transform="rotate(4,173.2,132.4)" />
        </pattern>
    </defs>

    <rect id="rect1" x="10" y="10" width="326.4" height="244.8" fill="url(#pattern1)" stroke-width="1" stroke="black" transform="rotate(4,168.2,127.4)" />
</svg>

Прямоугольник как контейнер изображения и изображение внутри контейнера. Изображение-контейнер поворачивается (изображение также вращается вместе с контейнером), и изображение также будет вращаться

0 голосов
/ 26 апреля 2020

Контейнер с повернутым изображением обрезает содержащееся изображение следующим образом:

Контейнер с повернутым изображением с изображением

Но внутри контейнера я также могу поворачивать изображение следующим образом: это:

повернутое изображение-контейнер с повернутым изображением

Надеюсь, две картинки объясняют это более точно. Изображение внутри контейнера не должно быть центрировано относительно контейнера!

...