translate-animation-on-svg-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

<title>Animating the "translate" property on an SVG element</title>

<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">

<style>

svg {

    width: 400px;

    height: 400px;

rect {

    width: 200px;

    height: 200px;

    transform-origin: top left;

    translate: 100px 100px;

</style>

</head>

<body>

<svg><rect></rect></svg>

</body>

</html>