Как использовать preserveAspectRatio в SVG <symbol>с использованием SVG.JS - PullRequest
Новая
       58

Как использовать preserveAspectRatio в SVG <symbol>с использованием SVG.JS

0 голосов
/ 21 октября 2018

Я недавно узнал об использовании 'preserveAspectRatio' для символов в SVG, что, честно говоря, меняло правила игры для тех типов конструкций, которые я пытался выполнить.Однако я не могу заставить его работать, используя SVG.JS.

Ссылка на JS Fiddle 

/* canvas created */
var draw = SVG('maindiv').viewbox('0 0 500 500').attr({ 'preserveAspectRatio': 'none' })

/* polgon created */
var polyg = draw.polygon('0,150 500,150 500,500 0,500').fill('black')

/* symbol created and inserted, with functioning viewbox but preserveAspect ratio not working */
var txt = draw.symbol().viewbox('0 0 500 500').attr({ 'preserveAspectRatio': 'xMinYMin meet' })
txt.text('Some Text').font({family: 'Arial',weight: 'bold',size: 30,fill: '#f06'})
var title = draw.use(txt)

/* clickable animation */

polyg.click(function() {
   this.animate().attr({'points':'0,350 500,350 500,500 0,500'})
})

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

Есть идеи?Отсутствует документация о том, как сделать это с помощью SVG.JS, поэтому я уверен, что это поможет нескольким людям, которые пытаются решить эту проблему, имея несколько элементов на одном холсте SVG, некоторые реагируют на область просмотраи немного статики.

...