CODEWITHSUNDEEP
htmlsvgpath
Gunacelan M
Gunacelan M

Reputation: 317

specifying values for d attribute of path tag in percentage

How can I use percentage values for the d attribute of a path tag?

For example:

<path stroke-width="4" d="M1% 10% l100% 0" />

does not work.

Since I want to reuse the elements in svg tag on change in svg size, I'm looking for absolute values (in percentage).

Thanks on advance..

Upvotes: 3

Views: 1881

Answers (1)

ccprog
ccprog

Reputation: 21811

SVG path data only allow dimensionless numbers, period.

If you want to change the size of a path, you will be doing that with transform attributes or by establishing a new viewport. For example, you could wrap your path with a <svg> element inside your outermost <svg>:

<svg ...>
    <svg viewBox="0 0 100 100" x="0" y="10%" width="100%" height="100%">
        <path stroke-width="4" d="M1 10 l100 0" />
    </svg>
</svg>

There, you define the path coordinates as absolute values. The inner <svg> defines a viewBox such that the path spans it to the amount you want. Relative sizing and positioning is then possible with the x, y, width and height attribute.

If you want to reuse the same element multiple times, you can do the same with <symbol> (a template that won't be rendered itself) and <use> elements referencing it:

<svg ...>
    <symbol id="myPath" viewBox="0 0 100 100">
        <path stroke-width="4" d="M1 10 l100 0" />
    </symbol>
    <!-- with relative sizes -->
    <use xlink:href="#myPath" width="100%" height="100%" />
    <!-- with absolute sizes -->
    <use xlink:href="#myPath" width="200" height="160" />
    <!-- using transforms -->
    <use xlink:href="#myPath" transform="translate(50, 0) scale(3.5)" />
</svg>

Upvotes: 4

Related Questions