javascript - 如何使用css选择SVG线xy坐标？

Question

我有什么可能的方法来使用CSS更改/选择SVGxy坐标？ 例如:

 <svg class="line line-1" width="700" height="500">
    <line x1="120" y1="330" x2="1000" y2="750" stroke="#ffffff"/>
 </svg>

I want to change xy coordinates whit media query in css.

Answer 1

您可以使用 CSS 应用翻译来更改线条的坐标。这是一个示例，其中我使该行从 (0,0) 开始:

svg {
  background:red;
}
svg line {
  transform:translate(-120px,-330px);
}

 <svg class="line line-1" width="700" height="500">
    <line x1="120" y1="330" x2="1000" y2="750" stroke="#ffffff"/>
 </svg>

如果您有许多元素，您可以将它们分组在一个 g orn​​ 中，您可以在其中应用所需的转换，因为您还可以考虑旋转、缩放等:

svg {
  background: red;
}

svg g.coord {
  transform: translate(-120px, -330px);
}

<svg class="line line-1" width="700" height="500">
<g class="coord">
    <line x1="120" y1="330" x2="1000" y2="750" stroke="#ffffff"/>
    <line x1="120" y1="330" x2="300" y2="650" stroke="blue"/>
    <line x1="120" y1="330" x2="180" y2="650" stroke="green"/>
</g>
</svg>