How to resize an svg (with batik) and display it?

a 夏天 提交于 2020-01-01 12:13:14

问题


I have a svg file of 100x100 pixels (for example). I am using Batik.

If I do a :

JSVGCanvas svg = new JSVGCanvas();
[...]
svg.setSize(10,10);

It will only show this part of the picture and not the resized image.

Do you know how I can display a resized svg picture ?

Thanks ;)


回答1:


You need to ensure that the document you are displaying has a viewBox="" attribute set on its root <svg> element. For example, specifying viewBox="100 100 300 200" indicates that the region (100,100)→(400,300) will be scaled to the size of the JSVGCanvas. By default, the aspect ratio of this region will be preserved when scaling, so you will get some extra padding on the top or bottom if it doesn't match the aspect ratio of your JSVGCanvas. To override that behaviour, use the preserveAspectRatio="" attribute.




回答2:


The view box parameter allows you to set the part of the canvas you want to see/display. If you want to "resize" your svg (an svg has no real size, because it is a vector image), you can add/change the parameters width and height present in the <svg> header like this :

<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>

If you want to change the view box, you can add the parameter

viewBox="0 0 1200.0 720.0" 

in the <svg> header (for a HD view of 1200 by 720).



来源:https://stackoverflow.com/questions/2724415/how-to-resize-an-svg-with-batik-and-display-it

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!