SVG вращение отрезает край

Question

Я пытаюсь повернуть SVG на проект дизайнера T-Shirt, но края SVG обрезаются. Код SVG выглядит следующим образом:

Перед Rotation (Все правильно в этом)

<g xmlns="http://www.w3.org/2000/svg" transform="scale(2,2)rotate(0,50,50)" id="clip1"> 
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" id="Layer_1" version="1.1"> 
    <g> 
    [POLYGON CODE WAS HERE] 
    </svg> 
</g> 

После вращения (один из краев становится отрезан !!!)

<g xmlns="http://www.w3.org/2000/svg" transform="scale(2,2)rotate(45,50,50)" id="clip1"> 
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" id="Layer_1" version="1.1"> 
    <g> 
    [POLYGON CODE WAS HERE] 
    </svg> 
</g> 

Все в вышеуказанных двух кодах одинаково, за исключением функции rotate (...).

Снимок экрана о том, что происходит не так, можно найти здесь - http://i.imgur.com/Kr5Azx3.png. В правом боковом изображении локоть обрезается, а также задний фон. Код файла SVG присутствует здесь - http://pastebin.com/LfC7TkwV

Является ли это поведением SVG по умолчанию или я пропустил какой-либо другой тег, чтобы сделать это? Любая помощь будет действительно оценена.

Спасибо.

Answer 1

Как говорит Эрик, операция поворота приводит к тому, что часть дизайна выходит за пределы окна просмотра. Возможно, вам придется добавить небольшой перевод() к вашему преобразованию и/или увеличить размер вашего viewBox, чтобы он включал новую большую ограничительную рамку.