This is quite a conundrum for a couple of days now.
I have an SVG shape that I want to animate — namely, I want it to change it's color along a specific path. A simple shape looks like this:
Shapes in my SVGs represent strokes constituting Chinese characters (Hanzi) — the example has been extracted from here:
Here are the highlights:
- It has to be done on SVGs (I need scalability).
- Each shape is bound by a path and filled with color.
- Most SVGs will have multiple shapes, often intersecting each other.
- The shapes don’t have a constant width.
- Each shape will have a dedicated path/stroke guiding it's direction.
- Each of the shapes has to be animated in sequence.
- The animations should have a constant speed (makes it a bit tricky with different element sizes, I think).
My research so far indicates that using a fill transform will not work with such shapes:
<html>
<body>
<head>
</head>
<div style="display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">
<div style="width: 100%; height: 100%; position: relative;">
<svg
xmlns="http://www.w3.org/2000/svg"
width="38.639015mm"
height="80.743088mm"
viewBox="0 0 38.639015 80.743087"
id="svg831">
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="#4DAF4C">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#fff">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<g
id="layer1"
transform="translate(-103.9336,-77.49032)">
<g
transform="matrix(0.35277777,0,0,-0.35277777,55.696164,149.58928)"
id="g823">
<path
style="fill:url(#left-to-right);stroke:none;stroke-width:0.99999994"
d="m 139.73604,123.37501 c 1.33299,-40.000002 5.667,-67.333302 12.99999,-82.000002 2.06847,-4.338361 2.99033,-6.799913 6,-12.000001 16.66701,-25.999995 36.667,-42.333293 60,-48.999998 23.33301,-6.66669 31.83301,-6.499995 25.50001,0.50001 -6.333,6.99999 -8.5,26.499998 -6.50001,58.499986 h -3.99999 l -8.00001,-43.999988 c -22,7.33332 -40.66699,21.99999 -55.99999,43.999988 -1.77033,3.225113 -4.43601,9.376455 -6,15 -4.66701,11.333303 -7.66701,34.333306 -9,69.000005 v 5 c -0.667,21.333 -1,40.333 -1,57 l 9,7 -26,12 c 0.66699,-14 1.667,-39.333 3,-76"
id="my_path" />
</g>
</g>
</svg>
</div>
</div>
</body>
</html>
I also considered clipping path, but I an not sure how to clip/unclip one object along another object realiably so that neighboring strokes are not clipped. Some other solutions need a lot of manual tinkering, which I need to avoid due to the volume of data I want to process.
EDIT: I had to edit this question as it has been — in my opinion wrongly — marked as a duplicate, as I clearly stated my restrictions (the other question has been solved by converting everything into strokes).
There is, however, a potential solution that came to my mind, but I am not sure how to proceed: I could make my red stroke so thick that it's wider than my shape, and then apply a clipping path with the exact same coordinates as my shape — then it would suffice to just animate the red stroke. But can separate objects have non-summing clipping paths?
