Как я могу динамически обновлять значения SVG viewBox из Polygon - PullRequest
Новая
       60

Как я могу динамически обновлять значения SVG viewBox из Polygon

2 голосов
/ 25 апреля 2019

Я создал SVG карты панелей страниц комиксов. 

<svg id="svg1413"  class="svg-pg" width="100%" height="100%" version="1.1" viewBox="0 0 178 254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="transition: .6s ease-out;">
    <image id="image1966" width="178" height="254" clip-path="url('#SvgjsClipPath1413')" xlink:href="https://i.imgur.com/yiZFUK4.jpg" />
    <g id="SvgjsG1413" clip-path="url('#SvgjsClipPath1413')" class="click-panels">
        <polygon fill="transparent" points=" 12,13 88,13 88,49 12,49"></polygon>
        <polygon fill="transparent" points=" 81,44 166,44 166,74 81,74"></polygon>
        <polygon fill="transparent" points=" 12,13 166,13 166,75 12,75"></polygon>
        <polygon fill="transparent" points=" 101,80 166,80 166,118 101,118"></polygon>
        <polygon fill="transparent" points=" 12,80 166,80 166,147 12,147"></polygon>
        <polygon fill="transparent" points=" 12,152 91,152 91,200 12,200"></polygon>
        <polygon fill="transparent" points=" 73,171 155,171 155,209 73,209"></polygon>
        <polygon fill="transparent" points=" 12,198 79,198 79,235 12,235"></polygon>
        <polygon fill="transparent" points=" 12,152 166,152 166,235 12,235"></polygon>
    </g>
    <defs id="SvgjsDefs1413">
        <clipPath id="SvgjsClipPath1413">
            <rect id="SvgjsRect1413" width="100%" height="100%" x="0" y="0">
            </rect>
        </clipPath>
    </defs>     
</svg>
<svg>
    ...svg content
</svg>
<svg>
    ...svg content
</svg>

Чего я хочу добиться:

  • Перебрать все теги
  • , находясь на , перебирает теги , содержащиеся в
  • Каждый содержит 4 пары координат (например, points=" x1,y1 x2,y2 x3,y3 x4,y4")
  • Я хочу, чтобы родительские значения viewBox и значения X и Y обновлялись значениями из текущих точек в цикле.

Я понял, как рассчитать значения, но я не знаю, как этого добиться в Javascript.

Мой псевдокод для расчета viewBox значений 

if <svg viewBox=" a b c d ">
a = x1, b = y1, c = x2 - x1, d = y3 - y2

Обновление Значения 

if <rect x="e" y="f">
e = x1, f = y1

ОБНОВЛЕНИЕ: Как управлять переходами с помощью событий щелчка / удара, а не делать их автоматически? 

<div id="controls" class="ctl-btn" style="width: 100%; position: absolute; bottom: 0; margin: 0 -8px; background-color: rgba(6,6,6,0.40);">
    <div style="max-width: 800px; text-align: center; margin: 0 auto;">
        <button class="pg-ctl-bk" style="margin: 8px; padding: 8px 10px;">  Back </button>
        <button class="pg-ctl-nxt" style="margin: 8px; padding: 8px 10px;"> Next  </button>
    </div>
</div>

Ответы [ 2 ]

4 голосов
/ 25 апреля 2019

Вы использовали тег svg.js, поэтому вы получите ответ svg.js: 

// Reference to svg
const canvas = SVG('#svg1413')

// List of all polygons
const polygons = canvas.find('#SvgjsG1413 polygon')

// List of all bboxes
const boxes = polygons.bbox()

const nextImage = function (index) {
  // Animate viewbox over 1s to new box
  canvas.animate(1000).viewbox(boxes[index])

  // Next image in 2s
  setTimeout(() => nextImage(++index), 2000)
}

nextImage(0)
svg {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
}

html {
  background: black;
}
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>


<svg id="svg1413"  class="svg-pg" width="154" height="254" version="1.1" viewBox="0 0 178 254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="transition: .6s ease-out;">
    <image id="image1966" width="178" height="254" clip-path="url('#SvgjsClipPath1413')" xlink:href="https://i.imgur.com/yiZFUK4.jpg" />
    <g id="SvgjsG1413" clip-path="url('#SvgjsClipPath1413')" class="click-panels">
        <polygon fill="transparent" points=" 12,13 88,13 88,49 12,49"></polygon>
        <polygon fill="transparent" points=" 81,44 166,44 166,74 81,74"></polygon>
        <polygon fill="transparent" points=" 12,13 166,13 166,75 12,75"></polygon>
        <polygon fill="transparent" points=" 101,80 166,80 166,118 101,118"></polygon>
        <polygon fill="transparent" points=" 12,80 166,80 166,147 12,147"></polygon>
        <polygon fill="transparent" points=" 12,152 91,152 91,200 12,200"></polygon>
        <polygon fill="transparent" points=" 73,171 155,171 155,209 73,209"></polygon>
        <polygon fill="transparent" points=" 12,198 79,198 79,235 12,235"></polygon>
        <polygon fill="transparent" points=" 12,152 166,152 166,235 12,235"></polygon>
    </g>  
</svg>
4 голосов
/ 25 апреля 2019

Я не уверен, почему вы использовали элементы здесь, когда все, что вам было нужно, это JavaScript-массив Array / JSON или, в конечном итоге, элементы, которые по крайней мере имеют x, y, width и *Атрибут 1006 * по запросу атрибута viewBox, но хорошо ... давайте разберемся с s затем ...

Чтобы преобразовать значение s point вашего атрибута в viewBox атрибут, самый простой - вызвать polygonElement.getBBox(), который вернет SVGRect с необходимыми значениями.

Чтобы анимировать свойство viewBox, проще всего использовать анимацию SMIL и полифилл для MSbrowsers.

Вам просто нужно определить элемент , нацеленный на атрибут viewBox, и обновить его атрибут to до целевого значения после обновления его from атрибут текущего значения. 

// animate : <animate attributeName="viewBox" ...>
// rect : {SVGRect} result of polygonElement.getBBox();
function animateViewBox(animate, rect) {
  animate.setAttribute('from', animate.getAttribute('to'));
  animate.setAttribute('to', `${rect.x} ${rect.y} ${rect.width} ${rect.height}`);
  animate.beginElement(); // (re)start the animation
}

Как только мы это получим, нам нужно только настроить функцию, которая будет перебирать все элементы в svg. 

function animateViewBox(animate, rect) {
  animate.setAttribute('from', animate.getAttribute('to'));
  animate.setAttribute('to', `${rect.x} ${rect.y} ${rect.width} ${rect.height}`);
  animate.beginElement(); // (re)start the animation
}

// container
const svg = document.getElementById('svg1413');
// all the <polygons> coordinates (would be better as JSON...)
const polygons = svg.querySelectorAll('polygon');
// <animate> element
const animator = svg.querySelector('.viewBoxAnimator');

// our iterator, we could call it on click
let i = 0;

function iterate() {
  if (i < polygons.length) {
    animateViewBox(animator, polygons[i++].getBBox());
    return true;
  }
}

// but we'll automate it
(async() => {
  while (iterate()) {
    await wait(1500);
  }
})();


function wait(time) {
  return new Promise(res => setTimeout(res, time));
}
svg {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  transition: all .6s;
}

html {
  background: black;
}
<!-- SMIL for IE -->
<script src="https://cdn.jsdelivr.net/gh/Kaiido/FakeSmile@1e50d675df616a8e784e0e6e931b3f0d595367d4/smil.user.js"></script>

<svg id="svg1413" class="svg-pg" width="154" height="83" version="1.1" viewBox="0 0 178 254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <animate class="viewBoxAnimator" attributeType="XML" attributeName="viewBox" from="0 0 178 254" to="0 0 178 254" dur="0.6s" fill="freeze"/>
  <image id="image1966" width="178" height="254" xlink:href="https://i.imgur.com/yiZFUK4.jpg" />
  <g id="SvgjsG1413" class="click-panels">
    <polygon fill="transparent" points=" 12,13 88,13 88,49 12,49"></polygon>
    <polygon fill="transparent" points=" 81,44 166,44 166,74 81,74"></polygon>
    <polygon fill="transparent" points=" 12,13 166,13 166,75 12,75"></polygon>
    <polygon fill="transparent" points=" 101,80 166,80 166,118 101,118"></polygon>
    <polygon fill="transparent" points=" 12,80 166,80 166,147 12,147"></polygon>
    <polygon fill="transparent" points=" 12,152 91,152 91,200 12,200"></polygon>
    <polygon fill="transparent" points=" 73,171 155,171 155,209 73,209"></polygon>
    <polygon fill="transparent" points=" 12,198 79,198 79,235 12,235"></polygon>
    <polygon fill="transparent" points=" 12,152 166,152 166,235 12,235"></polygon>
  </g>
</svg>
...