Log in / Register

Forum › Bugs

transform-origin attribute in SVG not properly supported?

yyang
Hi, I'm learning SVG and not quite sure if this is a bug. With the following code, the blue box is properly centered in Chrome but not in the PDF output of Prince, as if the transform-origin attribute is not specified. The doc doesn't mention it's unsupported. Thanks!

<!DOCTYPE html>
<html>
<body>
    <svg width="100" height="100" style="background-color: #e4e4e4" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect x="30" y="30" width="40" height="40" fill="transparent" stroke="red" />
        <rect x="30" y="30" width="40" height="40" fill="rgba(200,200,255,0.5)" stroke="blue" transform="scale(2, 0.5)" transform-origin="50% 50%" />
    </svg>
</body>
</html>
mikeday
Prince doesn't support the transform-origin property on SVG, but you can achieve the same effect by adding translations to the transform attribute as I recall.
yyang
Thanks! But it's not mentioned in the "current not supported" list in the doc. I understand that documentation cannot be up-to-date in all aspects. As proposed in the other post, an interactive shell would be priceless for the users to explore DOM features.
wangp
To be fair, the documentation says that Prince supports SVG 1.1 (with some exceptions).
transform-origin was introduced in SVG 2, by reference to the css-transforms-1 spec.
yyang
Thank you! That's my mistake.