Shulou(Shulou.com)06/01 Report--

This article mainly introduces how SVG draws adaptive diamonds in HTML5. The article is very detailed and has certain reference value. Interested friends must read it!

Problem: Need to draw an adaptive size diamond, and there is a border, generally in the flowchart is very common, the effect is as follows

If there is no border, CSS clip-path can also be very convenient to cut out a diamond, but the border is not easy to handle (usually with a nested layer or projection to simulate, but the effect is not very good), here is an SVG way to make full use of the scaling feature to achieve such an effect

Where does SVG come from?

SVG usually requires no handwritten code (except for a few basic shapes) and can be generated using design software (SVG was originally designed for machines and is very difficult for humans to read). For example, I'm using Figma here (a polygon will do), any size will do

And then you get this SVG.

The effect in the browser is as follows

II. SVG scaling features

SVG now has a default size. If you manually change the default size of SVG, it looks like this

Is it similar to object-fit:contain? If you want to spread it all over, what do you do with forced stretching? SVG's scaling attribute preserveAspectRatio is needed here, which represents the scaling rule when the actual size of SVG and viewBox size are inconsistent, somewhat similar to object-fit and object-position combination. The default value is xMidYMid, which means forced proportional scaling and centered alignment.

Interested parties can refer to this article: Understanding SVG viewport,viewBox,preserveAspectRatio scaling, the case is very detailed

https://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

Here we do not need proportional scaling, can be directly set to none

...

effect is as follows

III. Stroke scaling of SVG

After setting unequal scaling, there is actually a small problem with stroke. Under different size, stroke weight is different, as follows

Is there a way to keep strokes from scaling to SVG size? Of course, there was! SVG has an attribute vector-effect to control stroke not to scale, always keep the default size, interested can refer to this article CSS vector-effect and SVG stroke stroke scaling, here just need to add attribute vector-effect="non-scaling-stroke" in path on the line, indicating stroke does not follow scaling, as follows

...

This results in an adaptive size diamond, and the stroke does not scale. The full SVG code is as follows

SVG inline base64

Usually, such a graphic is more appropriate as a background image (SVG code doesn't look good on the page). Surprisingly, after converting SVG to base64, the above features are still present. Here use Zhang Xinxu teacher SVG online compression merge tool, as follows

After conversion, use this base64 directly as background

div{ background: url(_'data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')}

So you get an adaptive diamond background.

That's all for "How SVG draws adaptive diamonds in HTML5." Thanks for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.