Question

我有一个程序（基于Java）从数据生成SVG。用户可以上传他们自己的SVG，以便将它们用于我在最终SVG图像中使用的图标和标记。

这是如何工作的，我有一个placholder矩形，我用提供的SVG代替......

<svg xmlns="http://www.w3.org/2000/svg" height="176" version="1.1" viewbox="0 0 264 176" width="264">
   <!-- my own stuff -->
   <rect x="50" y="50" width="100" height="100" fill="none" class="placeholder" />
</svg>

现在我可以将代码中的rect替换为其他SVG，然后添加width和height属性，使其缩放。

<svg xmlns="http://www.w3.org/2000/svg" height="500" version="1.1" viewbox="0 0 500 500" width="500">
   <!-- my own stuff -->
   <svg x="50" y="50" width="100" height="100"  version="1.1" xmlns="http://www.w3.org/2000/svg">
    <!-- inner unknown XML -->
    </svg>
</svg>

问题在于，如果外部SVG不是方形（1：1），您将始终在水平或垂直方向上获得偏移。通过从外部SVG中读取viewBox的值，可以很容易地解决这个问题。但那些并不总是存在。

如果我在Chrome中打开外部SVG，我可以看到计算的宽度和高度值，但在我的Java代码中，我无法访问计算出的宽度和高度。

我看到的唯一解决方案是强制用户包含viewBox属性。还有其他解决方案，比如根据（计算的）质心定位元素吗？

Answer 1

SVG渲染器用于建立内在大小的完整算法在Intrinsic sizing properties of the viewport of SVG content下的规范中，但为了将一个svg内联到另一个svg中，可以简化：

x和外部SVG上的y属性将被忽略
如果外部SVG具有viewBox属性，请使用它。其他，
- 如果外部SVG缺少width或height中的至少一个，则假设为100%
- 如果width或height位于absolute或font-relative单位，请将其解析为用户单位
- 如果width或height为百分比单位，请将其作为占位符大小的百分比解析为用户单位
使用已解析的值

viewBox

"0 0 <width> height>"

将width和height设置为占位符值
设置preserveAspectRatio以将viewBox定位在视口

将未知来源的SVG中心转换为已知的SVG

1 个答案: