Есть ли какой-либо точный способ получить реальный размер элемента svg, который включает в себя штрих, фильтры или другие элементы, способствующие реальному размеру элемента из Javascript?
Я пробовал почти все, что пришло мне в голову, и теперь я чувствую, что я зашел в тупик: - (
Обновлен вопрос, чтобы добавить больше контекста (Javascript)
Вы не можете получить значения напрямую. Однако вы можете получить размеры ограничивающего прямоугольника:
var el = document.getElementById("yourElement"); // or other selector like querySelector()
var rect = el.getBoundingClientRect(); // get the bounding rectangle
console.log( rect.width );
console.log( rect.height);
Поддерживается, по крайней мере, в реальных версиях всех основных браузеров.
Оба raphael js http://dmitrybaranovskiy.github.io/raphael/ и d3 js http://d3js.org/ имеют различные методы для поиска размера объекта svg или наборов объектов svg. Это зависит от того, будет ли это круг, квадрат, путь и т.д. Относительно того, какой метод использовать.
Я подозреваю, что вы используете сложные формы, поэтому в этом случае ограничивающая рамка будет вашей лучшей ставкой http://raphaeljs.com/reference.html#Element.getBBox
(Изменить: обновленный справочный сайт.) http://dmitrybaranovskiy.github.io/raphael/reference.html#Element.getBBox
Вы не указали какой-либо язык программирования. Поэтому я могу предложить использовать Inkscape.
В меню файла вы найдете свойства документа, а на первой странице находится команда "изменить размер страницы на контент". Таким образом вы удаляете все пустое пространство вокруг своей ничьей, и вы видите реальный размер. После того, как значения ширины и высоты появляются внутри заголовка svg.
Я знаю, что Inkscape поддерживает сценарии и операции с командной строкой, но я не знаю, возможно ли это сделать так, чтобы обрезать работу. Но если это возможно, вы можете сделать это на каждом языке программирования.
Вот пример использования D3.js:
Начиная с div:
<div style="border:1px solid lightgray;"></div>
Код javascript выглядит следующим образом:
var myDiv = d3.select('div');
var mySvg = myDiv.append('svg');
var myPath = mySvg.append('path');
myPath.attr({
'fill': '#F7931E',
'd': 'M37,17v15H14V17H37z M50,0H0v50h50V0z'
});
// Get height and width.
console.log(myPath.node().getBBox());