0

I have converted a set of SVG-font glyphs to SVG path elements. An example of such a path is:

<!-- This file is called haydn.svg -->
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <path transform="translate(0 0) scale(1 -1)" id="10" d="M80 398c50 -68 90 -118 143 -184c6.22621 -7.92426 9.24864 -16.1689 9.24864 -24.7339c0 -6.56702 -1.77679 -13.3224 -5.24864 -20.2661c-19 -36 -40 -50 -69 -79c-10.4374 -10.8389 -14.9122 -26.0289 -14.9122 -42.9176 c0 -25.1817 9.94817 -54.1399 24.9122 -78.0824c40 -63 65 -107 104 -160c2.19052 -2.98708 3.11205 -6.05347 3.11205 -8.94647c0 -8.00267 -7.0515 -14.6785 -13.7996 -14.6785c-3.0625 0 -6.0625 1.375 -8.3125 4.625 c-18.7932 27.2501 -46.4159 62.4468 -87.0167 62.4468c-2.60722 0 -5.26795 -0.14514 -7.9833 -0.446846c-37.3002 -3.82566 -78.2594 -24.1165 -78.2594 -59.1228c0 -34.3572 13.2203 -53.8112 29.2594 -80.8772c1.90983 -3.24671 2.72542 -6.16515 2.72542 -8.67173 c0 -6.11404 -4.85254 -9.77763 -10.5138 -9.77763c-4.17048 0 -8.77986 1.98813 -12.2116 6.44936c-49 63 -97 106 -104 176c-0.304 2.7968 -0.452741 5.54555 -0.452741 8.24286c0 41.6664 35.4927 71.0611 82.4527 75.7571 c3.25176 0.309691 6.33568 0.451543 9.24434 0.451543c15.8756 0 26.5299 -4.22577 30.7557 -8.45154c6.0717 -5.31274 12.2874 -7.31334 17.2809 -7.31334c6.07303 0 10.3383 2.95907 10.3383 6.51795c0 1.22609 -0.506256 2.52338 -1.61926 3.79539 c-40 43 -69 91 -113 127c-9.72408 8.00806 -15.5219 22.5599 -15.5219 37.1052c0 10.8833 3.24596 21.7629 10.5219 29.8948c22 24 57 47 79 66c16.7435 14.9495 23.8322 33.1173 23.8322 52.5788c0 13.0839 -3.20398 26.7525 -8.83224 40.4212c-12 30 -23 48 -41 80 c-8 14 5 20 12 10z"/>
</svg>

In an application i want the user to be able to resize the shapes using a rescaling-factor which i would use then as an argument for the scale function. But how can i get the shapes resized by keeping the current coordinate system, so that they don't seem to be moving by each rescaling? Moreover i am using the shapes from another svg file by refering to them by the use element:

<use xlink:href="haydn.svg#120" transform="translate(0 0) scale(0.5)"/>

where the haydn.svg is the file where i have saved all the converted glyphs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy