I found this immensely helpful CodePen about animating SVGs via CSS. First question, would it also work with line elements? I tried it with a few different keywords but didn't succeed:

svg {
  width: 200px;
  height: 200px;
}
.path path {
  transition: d 400ms;
}
.line line {
  transition: x1 400ms, y1 400ms, x2 400ms, y2 400ms;
}
.path:hover path {
  d: path("M10,90 L90,10");
}
.line:hover line {
  x1: line("10");
  y1: point("90");
  x2: coord("90");
  y1: pos("10");
}

<svg  viewBox="0 0 100 100">
  <g stroke="black" stroke-width="5">
    <path d="M10,10 L90,90"/>
  </g>
</svg>
<svg  viewBox="0 0 100 100">
  <g stroke="black" stroke-width="5">
    <line x1="10" y1="10", x2="90" y2="90"/>
  </g>
</svg>

Also, where is the documentation for this, the fact that you have to write d: path("M10,90 L90,10"); instead of just d: "M10,90 L90,10"; seems non-trivial to me, how would that work with other properties of other elements?

CodePudding user response：

Only presentation attributes have their counter-parts in CSS.

As of today, here is the list of these attributes:

Properties with a presentation attribute	Elements that support the presentation attribute
cx, cy	‘circle’ and ‘ellipse’
height, width, x, y	‘foreignObject’, ‘image’, ‘rect’, ‘svg’, ‘symbol’, and ‘use’
r	‘circle’
rx, ry	‘ellipse’ and ‘rect’
d	‘path’
fill	Any element in the SVG namespace except for animation elements, which have a different ‘fill’ attribute.
transform	For historical reasons, the transform property gets represented by different presentation attributes depending on the SVG element it applies to: transform Any element in the SVG namespace with the exception of the ‘pattern’, ‘linearGradient’ and ‘radialGradient’ elements. ‘patternTransform’ ‘pattern’. ‘patternTransform’ gets mapped to the transform CSS property[css-transforms-1]. ‘gradientTransform’ ‘linearGradient’ and ‘radialGradient’ elements. ‘gradientTransform’ gets mapped to the transform CSS property [css-transforms-1].
alignment-baseline, baseline-shift, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, cursor, direction, display, dominant-baseline, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, mask-type, opacity, overflow, paint-order, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-overflow, text-rendering, transform-origin, unicode-bidi, vector-effect, visibility, white-space, word-spacing, writing-mode	Any element in the SVG namespace.

You can see that lines's x1, x2, y1 and y2 aren't there, and thus can't be controlled and thus animated by CSS.

For the values d can receive in CSS it's described here and basically it can receive either a path() function, or the value none.