我有一个 100x100 像素的 svg 文件(例如)。我正在使用蜡染。
如果我做一个:
JSVGCanvas svg = new JSVGCanvas();
[...]
svg.setSize(10,10);
它只会显示图片的这一部分,而不是调整大小的图像。
你知道如何显示调整大小的 svg 图片吗?
谢谢 ;)
您需要确保正在显示的文档viewBox=""
在其根<svg>
元素上设置了属性。例如,指定viewBox="100 100 300 200"
表示区域 (100,100)→(400,300) 将缩放到JSVGCanvas
. 默认情况下,缩放时会保留该区域的纵横比,因此如果与JSVGCanvas
. 要覆盖该行为,请使用该preserveAspectRatio=""
属性。
视图框参数允许您设置要查看/显示的画布部分。如果您想“调整”您的 svg(svg 没有实际大小,因为它是矢量图像),您可以像这样添加/更改标题中存在的参数宽度和高度:<svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" width="1200" height="720" contentStyleType="tex ....</svg>
如果要更改视图框,可以添加参数
viewBox="0 0 1200.0 720.0"
在<svg>
标题中(对于 1200 x 720 的高清视图)。