如何调整svg（使用蜡染）并显示它？

Question

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

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

Answer 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).