svg animations in qt 4.8.6

Bjorn.Gurnett

Hello

We are trying to use animated svg files in a project using qt 4.8.6 using QSvgRenderer. It appears that animations such as

<animateTransform attributeName="transform" type="scale" values="1;0.85;1" begin="0s" dur="0.8s" fill="freeze" repeatCount="indefinite" />

work as expected when compiled. However, animations like

<animate attributeName="opacity" values="0;1;0" begin="0s" dur="0.8s" fill="freeze" repeatCount="indefinite" />

works fine in chrome, but does not work via Qt. I have found only one reference to this problem, but no solution. Is there one?

Thank you

SGaist

Hi and welcome to devnet,

What reference was it ?

Bjorn.Gurnett

Hello.

it was the following

http://stackoverflow.com/questions/23095732/why-do-animated-elements-in-qtsvg-need-to-be-of-type-animatetransform-in-order-t

Thanks

SGaist

From a quick look at the sources, the animate node are not parsed. However, Qt's officially supports the static features for SVG Tiny 1.2 so I don't know whether animate not falls in this case.

Bjorn.Gurnett

Which files are you looking at regarding the parsing?

Thanks

SGaist

qsvghandler.cpp

Bjorn.Gurnett

Thanks for the help. Seems like a big omission to leave out animate which holds opacity, but never mind.

SGaist

I don't know what it would take to implement that. Do you have an example of a simple SVG that has that animation ?

Bjorn.Gurnett

This is a simple one that uses hover

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="34px" height="34px" viewBox="0 0 34 34" xml:space="preserve">
	<image width="34" height="34" opacity="1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABNRJREFUeNrsWElLbEcUPu08tbM4PMeFLxAxiGCI0BBUgpvgSkmy8mXTImSRTTZvI/kPgcZVsgo2vAgRkk0IGJQYIogEVAwOJHHEoZ3nId9X9Gmqr32vbVYucuBwvVW3zvnqqzNU67u/v5fnICnyTOTZAEmzX6qqqpJZ0wD9CPoBtADaEh2fhR5Cf4KGNzY2Vt0M+Hw+87TDwme/EMjAwEDCxcPDw3Q+WFRU9H5bW5u0trZKXl6eVFZWmvnNzU05OTmRmZkZmZ6elkgkMonhEOx96wZoaGgoMSMuAN7G47P6+vrBvr4+qaurk+PjYzk9PZWjoyPZ2dkx32VlZUl6erp0dHRIT0+PrK2tBcLhcADrA5j+CoDmvfx4MkIWUlNTR2i4vb1d9vf3DQiuIb1KsQrHda6goEAKCwtlampKxsbG5Pb29mPYDrsxkuLBxCvsciQYDEpzc7OsrKwYIDAYA0EFUKMpKSmxsbu7O9nd3ZXV1VWzljZoizaflDVY0JKWlvZ1f3+/5OfnCwJPrq+v43btJvYc13At2aEt2qTtp6TvYFdXl/j9ftna2jIGbdqpZIBqZ4I9pt/f3NyYQOaGaJO2kwICxL1lZWXBpqYmY4AgSDWFT3XAvycmJmR0dNTo5ORk3LzNjoKhTdqmj2QYGWRgHh4eytXVVQwEY8MGQ4CMA2WI2VNdXR0HlE9dR1sMdNpOxIoTSAvqRGd5eTnrgDFCg/bTBuOUjIwMM2eD599khM+9vT2pqKgQ+nDGihNIb01NjSlMyoYCcBpVULbodxob9jo+ySJt0wd9uZZ4SHtJSYkpVuoorgw76oZT6NwJgsp3HaNt+oAEvIC8xejWALXPmjWBceMloVAo7p0FraGh4QFT9EFfXkdTxjKtLCgDNMJybheyZJTAS0tL49KeG8vMzKTZEi9GYs61JtiG3QqXl2RnZ8d1W7dAdwLZwc5fkD67SPFJg0w/e/wxYYZw96iocWkdrdIRLyCLqA0v2DvUoTotLi6WxsbG2A55XOPj43GLu7u7Y5mmjhcXF02PspmIZt5fXkCmwEgnz5ULnUdCgzqWiF6OsbfYQJzxxifjDd/MegXrm+3tbcOAFqVkmps95rWOc2SbPlCnfvACMgu0vzDX3WLAZsiZJc6dJ1p7dnYmBwcHM8io6cd6TYg1g0Dsu4caUia4s9zc3Ng8j9N2rimr62iLa5aXlxmsbzB84Jm+OOMwbmqdiIcgC5LSqSBsZ7W1teympsdQzs/PHxyVguDG2GtgdxT6HebOkrmPhJaWluTi4iJ2tm50s+uur68bpSPnUWjgXl5eStQm2VhL6mIEVmaxi08XFhZMk7LbufN+6jWmDY8xNzc3R8a+RAz+6mTD884KMN8gsj+Zn5839w4WIe28j4l2ab2zEASK4WswNoLpf5K6xbMO2ILfLe/imy/QMXt5T+FvGb0sa8XUY7CvCGSB10wA+Z7HASZ+x2cr+P7mPwGJOvEhKD8HgFfIlHdYZXNycgyYaAMz9xcCYHqy8AHIH8wOsPAjpnehf997NKgHQLwE907cp/0B/DT4ECDeA7486MtofPwJPQEjvyEWfkZssYSfQtehx48VxScBsQBl4VEE9bOkQHOiUwzC26jjCI71wmW9N5D//y0B+VeAAQBSLcVa3zwajAAAAABJRU5ErkJggg==">
		<animate attributeName="opacity" to="0" dur="300ms" begin="theTop.mouseover" fill="freeze"/>
		<animate attributeName="opacity" to="1" dur="300ms" begin="theTop.mouseout" fill="freeze"/>
	</image>

	<image width="34" height="34" opacity="0" xlink:href="data:image/png;base64,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">
		<animate attributeName="opacity" to="1" dur="300ms" begin="theTop.mouseover" fill="freeze"/>
		<animate attributeName="opacity" to="0" dur="300ms" begin="theTop.mouseout" fill="freeze"/>
	</image>

	<circle id="theTop" fill="#000000" opacity="0" cx="16.917" cy="16.917" r="14"/>
</svg>

kind regards