来自 Illustrator 的 SVG 图表响应

Question

我正在 Illustrator 中设计图表并将其导出为 SVG。有没有办法让它响应，以便结果充当以下动画？即：圆圈不会变形，线条会在屏幕缩小后保持笔划大小。如果我必须编辑 Illustrator 生成的 SVG，那完全没问题。提前致谢！

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

Answer 1

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

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

This value modifies the way an object is stroked. Normally stroking involves calculating stroke outline of the shapeʼs path in current user coordinate system and filling that outline with the stroke paint (color or gradient). The resulting visual effect of this value is that the stroke width is not dependant on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.

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>

来自 Illustrator 的 SVG 图表响应

SVG chart responsive from Illustrator

svg

charts

responsive-design

responsive

adobe-illustrator