Illustrator提供的SVG图表响应

Question

我正在Illustrator中设计一个图表，并将其导出到SVG中。是否有某种方法可以使其响应，从而使结果充当以下动画？即：圆圈不会变形，线条将在屏幕缩小后保持笔划大小。如果我必须编辑Illustrator生成的SVG，那很好。提前感谢！

https://i.stack.imgur.com/7dQxn.gif

Answer 1

一切都取决于你想要实现的目标。首先，真正的图表不应该在iIllustrator中绘制。这就是为什么我认为这不是一个真正的图表。只是一个幻想的形象。

如果你需要实现的是像这里链接的gif一样的东西：你可以通过对你的svg使用preserveAspectRatio="none"来实现这一点。此外，线路和路径必须具有vector-effect:non-scaling-stroke;

此值修改对象的笔划方式。正常冲程包括计算形状在电流中的路径的笔划轮廓用户坐标系，并使用笔划绘制填充轮廓(颜色或渐变(。该值产生的视觉效果是笔划宽度不取决于元素(包括非均匀缩放和剪切变换(和缩放级别

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect

正如你所看到的，我在stroke-linecap: round;中使用了非常短的线，而不是圆形。这将使它们看起来像圆形，并且由于vector-effect:non-scaling-stroke;，它们将保持形状。

svg{border:1px solid; width:100%; height:300px;}
path{fill:none;stroke-width:4px; vector-effect:non-scaling-stroke;}
line{stroke-width:40px;stroke-linecap: round;vector-effect:non-scaling-stroke;}

<svg viewBox="0 0 200 100"  preserveAspectRatio="none">
<path d="M5,25L195,25M5,50L195,50M5,75L195,75" stroke="black" />
<g stroke="red">
<line x1="35" y1="25" x2="35.01" y2="25" />
<line x1="155" y1="50" x2="155.01" y2="50" />
<line x1="75" y1="75" x2="75.01" y2="75" />
<path d="M35,25L155,50 75,75"/>
</g>

<g stroke="green">
<line x1="95" y1="25" x2="95.01" y2="25" />
<line x1="75" y1="50" x2="75.01" y2="50" />
<line x1="155" y1="75" x2="155.01" y2="75" />
<path d="M95,25L75,50 155,75"/>
</g>
</svg>