Question

我有什么方法可以使用css更改/选择SVG xy 坐标？例如：

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

我想在css中更改 xy 坐标白名媒体查询。

Answer 1

您可以使用CSS应用翻译来更改线条的坐标。以下是我从(0,0)开始行的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您有许多元素，可以将它们分组到g orn中，在那里应用所需的变换，因为您还可以考虑旋转，缩放等：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: