Question

我有一个像SVG这样的网格：

<svg id="canvas-svg" class="remove-on-save" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="#EF1D1D" stroke-width="0.7"></path>
      </pattern>
      <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
        <rect width="100" height="100" fill="url(#smallGrid)"></rect>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)"></rect>
</svg>

事情是以整个文档的0,0为中心，我想将10x10正方形与我在屏幕中居中的另一个DIV对齐，尝试设置偏移到网格但是没有做到特技。

顺便说一句，我在一个包装div中得到了SVG Grid，我不想使用left，right，top css。网格将完全移动，我只想对齐它而不会丢失网格的100％x 100％传播。

有什么想法吗？感谢

我在这个JSFiddle上得到了http://jsfiddle.net/7pLhj/

的例子

看到此示例中的网格与居中的div不匹配？我想让它匹配，但不会失去100％的宽度和100％的高度。

Answer 1

＆＃34;尝试设置一个偏移到网格，但没有做到这一点＆＃34;

我猜你设置偏移量的方法是设置x＆amp; rect的y属性。这是对的吗？

尝试使用转换来完成它。

<rect width="100%" height="100%" fill="url(#grid)"
      transform="translate(400,500)" />

400,500是你的div的偏移量。

如何在基于DOM的div中对齐SVG网格

1 个答案: