如何在HTML网格上方完美对齐SVG网格

时间：2019-02-06 01:51:58

标签： css svg

我想在CSS网格布局上放置网格线和顶点。我试图找出是否可以仅通过使用width，height和viewBox来实现。

我正在专门尝试将svg放在div的上方。因此，建议不要将所有内容都绘制为svg。

示例： https://jsfiddle.net/4nx7aqwg/1/

我想使用单位长度在svg中包含所有内容。因此，如果我想从0,0到2,2划一条线，可能是：

<path d="M 0 0 L 2 2"></path>

我已经尝试算出一些数学运算来设置viewBox，以使单个单位长度等于html网格单元的宽度（加上grid-gap？）

有9列，这是单元格之间的8条网格线。每条网格线为2px（grid-gap:2px）。因此每个单元格为(600-(8*2))/9 = 64.888888889px

尝试1： 如果我有一条从0,0到1,0的svg线，我希望它从2px边框的左侧开始并延伸到2px网格的末尾间隙。这是否意味着我需要1 svg unit = 64.888888889px + 2px + 2px = 68.888888889px？在这种情况下，我会有viewBox="0 0 8.767741935 8.767741935"

尝试2： 如果我有一个宽度为4的svg路径，则其宽度从中心开始延伸。因此，这实际上可能意味着我需要1 svg unit = 64.888888889px + 1px + 1px = 66.888888889px？在这种情况下，我会有viewBox="0 0 9.029900332 9.029900332"

这些不能正常工作。

相关问题：

  • 我在vector-effect: non-scaling-stroke;元素上设置了path。这是否意味着stroke-width="2"会产生2px的中风？还是我需要根据当前的stroke-width来找出viewBox？

  • 这是徒劳的吗？所有小数点都会确保我永远无法正确对齐吗？

  • 我应该放弃svg（<path d="M 0 0 L 2 2"></path>）内部的简单单位度量，而是尝试根据单元格宽度（例如<path d="M 0 0 L 129.77776 129.77776"></path>）来确定坐标应该是什么

更多上下文-我通过display:grid;和grid-gap:2px已有html / css网格。该div为600x600。每个“单元格”为(600-(8*2))/9=64.8888。

no padding just gap

但是它没有外部边缘，因此我应用了padding:2px。现在，“整个”网格为604x604：

padding and gap

当前，我想将svg绝对定位在网格上方并在其上绘制（在具有顶点的绘制模式下）。请注意，顶部/左侧顶点是如何与边缘齐平并位于填充上方的（错误地，但是仍然是齐平的，因为视图将它们裁剪了）。我希望右/底顶点相同。所有圆应精确居中在两条网格线相交的位置。

如果svg具有viewBox="0 0 9 9" width="600" height="600"

，则结果为

svg on top

所以我希望所有边缘齐平，所以我需要svg为604x604。是否存在值x使得viewBox="0 0 x x"会给我我想要的东西？

这个下一个示例仍然有viewBox="0 0 9 9"。请注意，第一条蓝线如何稍微位于网格线的左侧，而最后一条蓝线如何稍微位于右侧。由于不正确的viewBox导致行移动：

enter image description here

结果为viewBox="0 0 9 9" width="600" height="600"：

svg on top

结果为viewBox="0 0 9 9" width="604" height="604"：

enter image description here

因此，我正在尝试在div上方完美对齐网格。如果我可以完美地对齐网格，则可以正确对齐所有其他内容，并使绘制的线条位于网格线的顶部。

1 个答案:

答案 0 :(得分：1)

您没有完全解释您要实现的目标。如果您正在寻找像素完美的对齐方式，那么您可能会感到失望。我希望HTML布局引擎和CSS渲染引擎的像素舍入会有所不同。

  

有9列，这是单元格之间的8条网格线。每条网格线为2px（grid-gap：2px）。因此每个单元格为（600-（8 * 2））/ 9 = 64.888888889px

这看起来很正确。但是请记住，HTML网格上的填充为2px。在上面的计算中不需要考虑这一点，因为HTML引擎不在600px中包括它。但是它会影响您的#container的大小，从而也会影响SVG。您的SVG将为604px宽。使用"0 0 9 9" viewBox，一个SVG单位（1 / 1px）相当于67.1111 CSS像素。

因此，相对于容器和SVG，CSS网格中的单元格3将从以下位置开始：

2px + 3 * 64.8888px + (3 * 2px)
= 202.6666

在SVG中，它将始于

3 * 67.1111
= 201.3333

您可以考虑将2px填充物从#grid移到#container，以使#grid和＃svg-grid以相同的大小开始。

  

我设置了矢量效果：非缩放描边；在路径元素上。这是否意味着stroke-width =“ 2”将给出2px的笔画宽度？还是我需要根据当前的viewBox找出笔划宽度？

是的。无论SVG的比例大小如何，笔划将始终为2px。请注意，尽管并非所有浏览器都支持vector-effect。

  

这是徒劳的吗？所有小数点都会确保我永远无法正确对齐吗？

老实说，是

  

我应该放弃svg（）中的简单单位度量，而是尝试根据单元格宽度（例如）来确定坐标应该是什么

如果您需要尽可能高的像素精度，那么这可能是最好的方法。如果您解决了上面提到的填充问题，那么计算将变得更加容易。

相关问题
最新问题