Вопросы Теги

svg viewBox размер и расположение [дубликат]

Я боролся с той же проблемой, пытаясь сделать мое приложение будущим доказательством, но эти ребята заставили меня идти в правильном направлении. Я фактически не проверяю номер, чтобы увидеть, работает ли он или нет, я просто пытаюсь убедиться, что была введена серия чисел, которая может иметь или не иметь расширение.

Худший случай если пользователь должен был вытащить неформатированный номер из XML-файла, они все равно просто набрали числа на номерной панели телефона 012345678x5, и никаких реальных причин сохранить его довольно. Этот тип RegEx для меня выдаст что-то вроде этого: 

\d+ ?\w{0,9} ?\d+
  • 01234467 extension 123456
  • 01234567x123456
  • 01234567890
2
задан KwiZ 12 March 2015 в 07:21
поделиться

1 ответ

Вы можете просто установить свой viewBox svg в свою Bounding Box. 

function setViewbox(svg) {
  var bB = svg.getBBox();
  svg.setAttribute('viewBox', bB.x + ',' + bB.y + ',' + bB.width + ',' + bB.height);
  }

document.querySelector('button').addEventListener('click', function() {
  setViewbox(document.querySelector('svg'));
  });
svg {  border: 1px solid }
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 300" enable-background="new 0 0 500 300" xml:space="preserve" width="250" height="150">
  <path fill="none" stroke="#B2E230" d="M413.7,276.5c0,0,67-37,116,0c-24.1-33,16.4-53,0-34s-100-2-75-38" transform="translate(-75,-75)" />
</svg>
<button>setViewbox</button>

Примечание: оно также будет учитывайте невидимые якоря ваших патчей.

10
ответ дан Kaiido 20 August 2018 в 23:27
поделиться
  • 1
    Спасибо, сэр, это работает! : D Anw, похоже, он не работает должным образом с svgs, который имеет преобразование, например: codepen.io/KwiZ/pen/pvxdNw . У вас есть решение для этого? – KwiZ 12 March 2015 в 10:24
  • 2
    ваш метод обхода проблемы с моим примером codepen.io/KwiZ/pen/pvxdNw :) Это нормально, когда я вручную обертываю & lt; g & gt; элементы вокруг каждого пути & lt; path & gt; и использовать старый код. – KwiZ 12 March 2015 в 10:40
  • 3
    @KwiZ Извините, что неуместно removeChild() теперь работает с вашим кодепом – Kaiido 12 March 2015 в 10:40
  • 4
    @Kaiido, похоже, не может заставить это работать jsbin.com/mukowi/1/edit?html,js,output . Не могли бы вы сообщить мне, в чем проблема? – Abishek 13 October 2015 в 15:50
  • 5
    @AbishekRSrikaanth интересный случай. Я буду копаться в нем, когда у меня будет больше времени, но на первый взгляд я бы сказал, что проблема в том, что позиция x вашего пути отрицательная. Таким образом, быстрое исправление будет заключаться в том, чтобы добавить некоторую проверку при вычитании vB.x из vB.w (l24 моего фрагмента) if(vB.x>0)vB.w-=vB.x if(vB.y>0)vB.h-=vB.y jsfiddle.net/vbrnuoj2 Но я переписал все это, как я нахожу это довольно уродливо сейчас ... – Kaiido 13 October 2015 в 16:26