Вращающийся Вложенный SVG - PullRequest
Новая
       10

Вращающийся Вложенный SVG

0 голосов
/ 18 мая 2018

Я использую SVG.js и пытаюсь сделать некоторые манипуляции с SVG.Ранее я работал с canvas, но был очень разочарован качеством изображений, которые он генерировал, поэтому я решил использовать чистый SVG.

Мне удалось изменить все на чистый SVG-подход, все, кроме одноговещь: вращение.

Я не могу заставить его работать.Я хотел бы использовать то, что предлагает библиотека SVG.js, но это не сработало.Я также попытался поиграться с элементами внутри, но также безуспешно.Лучшая ссылка, которую я нашел до этого момента, была эта , но хотя ему удается вращать изображения по отдельности, она не показывает, как вращать все вместе (как в моем случае)

Что я хочу

Я хочу иметь возможность вращать изображение SVG, которое я создал в Inkscape (довольно просто)

Проблема

Нет ротации вообще, через несколько методов и мнений в Интернете.

То, что я пробовал

  • с использованием преобразования Атрибут с rotate (45)
  • с использованием встроенного метода SVG.js
  • , читающий о том, как нельзя применить вращение к тегу
  • чтение о том, как вращение SVG отличается от CSS относительно его системы координат (например, эта ссылка из css-tricks )

Пример проблемы

Здесь у меня есть простой SVG-плеер, который я помещаю в переменную JS.Изображение создано и перемещено в координаты = (50, 50).Наконец я пытаюсь повернуть его на 45 градусов.(Что не помогает) 

const player = '<svg width="11.214mm" height="6.3195mm" version="1.1" viewBox="0 0 11.214 6.3195" xmlns="http://www.w3.org/2000/svg">&gt;\n' +
    ' <g transform="translate(-172.04 62.213)">\n' +
    '  <g transform="matrix(.429 0 0 .429 160.68 -80.101)">\n' +
    '   <g stroke="#000">\n' +
    '    <path d="m39.592 42.246c-4.5716 0.02368-12.788-1.0453-12.77 6.7945 0.01784 7.8398 12.788 6.8319 12.788 6.8319s12.667 1.041 12.681-6.9252-8.1273-6.7249-12.699-6.7012z" fill="#ff2a2a" stroke-width=".20436px"/>\n' +
    '    <circle cx="39.556" cy="49.061" r="7" fill="#ffb380" stroke-width=".26458"/>\n' +
    '   </g>\n' +
    '  </g>\n' +
    ' </g>\n' +
    '</svg>';

    if (SVG.supported) {
    	const drawArea = SVG('svgDrawArea').size(300, 300);
      
      const group = drawArea.nested();
      group.svg(player);
      group.move(50, 50);
      
      group.transform({ rotation: 45 });
    } else {
        alert('SVG not supported')
    }
    
#svgDrawArea{
  /* background-color: red; */
  height: 300px;
  width:300px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js"></script>
<div id="svgDrawArea"></div>

Я был бы счастлив, если бы кто-то мог объяснить, почему вращение не работает, или указать мне куда-нибудь, где я могу уяснить себе, почему!

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

Ваша проблема связана с тем, что в SVG 1.1 элемент <svg> не допускал атрибут transform.Теперь это разрешено в SVG 2, но только Firefox реализовал это до сих пор.В Chrome пока нет.

Решение состоит в том, чтобы сначала добавить группу, а затем поместить SVG в эту группу.Затем вы можете вместо этого преобразовать эту группу, и она будет работать в обоих браузерах.

Так же, как @noob предложил в своем ответе.Не стесняйтесь принять их ответ, если хотите.

0 голосов
/ 18 мая 2018

извините, только решение, но без объяснения (у меня есть собственные проблемы с вращением SVG путей, я знаю вашу боль)

Я использовал 

group.transform({ x: 50, y:50});
group.transform({ rotation: 45 });


const player = '<svg width="11.214mm" height="6.3195mm" version="1.1" viewBox="0 0 11.214 6.3195" xmlns="http://www.w3.org/2000/svg">&gt;\n' +
    ' <g transform="translate(-172.04 62.213)">\n' +
    '  <g transform="matrix(.429 0 0 .429 160.68 -80.101)">\n' +
    '   <g stroke="#000">\n' +
    '    <path d="m39.592 42.246c-4.5716 0.02368-12.788-1.0453-12.77 6.7945 0.01784 7.8398 12.788 6.8319 12.788 6.8319s12.667 1.041 12.681-6.9252-8.1273-6.7249-12.699-6.7012z" fill="#ff2a2a" stroke-width=".20436px"/>\n' +
    '    <circle cx="39.556" cy="49.061" r="7" fill="#ffb380" stroke-width=".26458"/>\n' +
    '   </g>\n' +
    '  </g>\n' +
    ' </g>\n' +
    '</svg>';

    if (SVG.supported) {
    	const drawArea = SVG('svgDrawArea').size(300, 300);
      
      const group = drawArea.nested();
      group.svg(player);
      
     // group.rotate(45);
      //group.move(50, 50);
      group.transform({ x: 50, y:50});
      group.transform({ rotation: 45 });
    } else {
        alert('SVG not supported')
    }
    
#svgDrawArea{
  /* background-color: red; */
  height: 300px;
  width:300px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js"></script>
<div id="svgDrawArea"></div>
...