Question

我最近发现了在SVG中的符号上使用'preserveAspectRatio'的方法，老实说，由于我一直在努力实现它们的设计类型，因此这是一个游戏规则改变者。但是，我似乎无法使用SVG.JS来使它工作。

/* 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画布中包含多个元素的挑战，有些人对视口做出了响应和一些静态的。

如何使用SVG.JS在SVG <symbol>上使用preserveAspectRatio

0 个答案: