时间戳

首页 > 解决方案 > 如何在 SVG 上使用 preserveAspectRatio使用 SVG.JS

javascript - 如何在 SVG 上使用 preserveAspectRatio使用 SVG.JS

问题描述

我最近发现在 SVG 中的符号上使用“preserveAspectRatio”，老实说，我一直在尝试完成的设计类型改变了游戏规则。但是，我似乎无法使用 SVG.JS 让它工作。

链接到 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 画布中拥有多个元素的相同挑战的人，其中一些元素响应视口和一些静态的。

标签： javascripthtmlcsssvgsvg.js

解决方案

推荐阅读