Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow to apply transform to path #36

Open
Harvie opened this issue Aug 21, 2018 · 2 comments
Open

Allow to apply transform to path #36

Harvie opened this issue Aug 21, 2018 · 2 comments

Comments

@Harvie
Copy link

Harvie commented Aug 21, 2018

As described in https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

it's common for svg <path> element to have transform="" attribute

typicaly it looks something like this:

<path id="something" d="..."  transform="rotate(-10 50 100)
                translate(-36 45.5)
                skewX(40)
                scale(1 0.5)" />

Can you please add possibility to apply this transformation if supplied to svg.path during parsing stage? In fact only support for rotate(), translate() and scale() is needed in most cases. It should be pretty easy to do.

In ideal case svg.path would take two individual strings: d attribute and transform attribute.
It would be also perfect, if i can just supply whole <path ... /> string and svg.path would extract the data from it, so i don't need to parse it by myself. Or even whole SVG file, which would in turn get exploded into multiple paths.

Thanks

@regebro
Copy link
Owner

regebro commented Aug 21, 2018

This is the same as issue #31, although the title doesn't make that obvious, so I'll keep both open.

@tatarize
Copy link
Contributor

Any complex number can z can be represented with the matrix.

complex-matrix

Which means just doing typical operations with in complex numbers.

For scale, multiply by scale (no imaginary part).
For rotation by theta, you multiply by cos(theta)+i sin(theta)
For translation you add dx + i dy

For you skew matrix we need to multiply by a value that has two different imaginary components so I think that's a convert back to reals do the math and put it back.
(1 0)
(k 1)

Given his code doesn't do anything other than parse SVG paths into Path objects he should generally just allow for scale, rotate, and translation objects on all the elements there as well as the path object itself. Which means just doing those operations on particular elements.

I think a couple functions like:

class CubicBezier(object):
    ...
    def rotate(self, theta):
        """Rotate the Bezier curve by theta radians"""
        rotate = cos(theta) + sin(theta) * 1j
        self.start *= rotate
        self.control1 *= rotate
        self.control2 *= rotate
        self.end *= rotate

would do it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants