In this article, there is a small tail in the golden spiral effect of the dream effect that can be realized by SVG+CSS3 rotating animation attribute, which is about the scaling problem of stroke attribute with the scaling dynamic effect transform:scale() and other proportions. At that time, various methods were exhausted and no solution was found, so I tried to define one more layer. Then stroke attribute is written in the outer layer, still cannot work, stroke is still just this when doing the dynamic effect, is a thorny problem, recently prepared to write an article about “strawberry festival 2018” propaganda video animation to implementation with SVG + CSS 3, once again encountered this problem, if can’t solve, effect is not needed. Here’s an example:

transform:scale() 

@keyframes enlarge{
0%{opacity:0; transform:scale(1); transform-origin:center center}
100%{transform:scale(13); transform-origin:center center}
}
#heart{animation:enlarge 3s ease}
Copy the code

<path id="heart" d="" /> <! -- Path of the heart -->

Here’s a quick note about AI exporting SVG stroke shapes. As any designer knows, there are three types of strokes in AI: inside stroke, outside stroke and center stroke. Only paths exported using a center stroke can be used as stroke attributes in SVG. In this example, the CSS property for a heart looks like this

   stroke: #000;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 8px;
Copy the code

But if you change the stroke to an inside stroke and look, the heart will export two paths

<g> <path d=""/> <! --> <path d=""/> <! -- Black stroke path --> </g>Copy the code

In other words, by default an AI is given a “contoured stroke” that is, stroke to path processing. So when AI exports SVG, try to use a center stroke, except for special effects. It can effectively simplify the code amount and increase the readability of the code. And of course, the most important thing is that you can control the scaling properties of the stroke. Add the dynamic effect of the zoom deformation to see the effect

This scale up stroke can be passed off, especially in real cases, because the base image is all the stroke elements and the stroke is of equal thickness. How to do? No one seems to have asked a similar question, let alone a solution. 715. Searching for a new SVG+CSS3 in broken English, then I see someone solving this problem on Codepen and try it. 715. Here we go

vector-effect: non-scaling-stroke

Vector effect: Stroke without scaling!! So, I just throw this property into the CSS property of the graph

#heart{ vector-effect: non-scaling-stroke; Animation: enlarge 3 s ease; }Copy the code

And then look at the effect

  <path d="" vector-effect="non-scaling-stroke"/>\
Copy the code

Of course, being a studious person, I would have checked to see if there were any other Settings available, and found the following explanation in the W3C (and the 2013 standard) : Sometimes it is of interest to let the outline of an object keep its original width no matter which transforms are applied to it. For example, in a map with a 2px wide line representing roads it is of interest to keep the roads 2px wide even when the user zooms into the map. To achieve this, SVG Tiny 1.2 Introduces the ‘vector-effect’ property. Future versions of the SVG language will allow for more powerful vector effects through this property but this version restricts it to being able to specify the non-scaling stroke behavior.

‘vector-effect’

Value: non-scaling-stroke | none | inherit

Initial: none

Applies to: graphics elements

Inherited: no

Percentages: N/A

Media: visual

Animatable: yes

Computed value: Specified value, except inherit

Well, too much nonsense, in short, useless, either no scaling, or no definition, default scaling. Ladies and gentlemen, don’t hit when you show mercy.

Finally, the above is for Chrome only

There will be an updated article about the promotional video of Strawberry Music Festival in the future, in which this attribute definition will be used extensively.