假设我们有一个画布:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 500 500" width="100%" height="100%"></svg>
还有一个元素:
<path d="M0 0 55 122 0 300 300"/>
其位置取决于坐标。
如果这些相同的坐标是一辆马车和一辆小推车,不要全部重写,这样元素就不会显示在画布的左上角,而是显示在画布的右下角。
SVG 中是否有一个容器元素,您可以将该元素path
放入其中并将其移动到任何地方以及您想要的方式?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" width="100%" height="100%"> <path d="M0 0 55 122 0 300 300"/></svg>
使用命令移动单个 SVG 元素或一组元素
transform="translate(x y)"
在下面的示例中,标有“开始”的栏已
200px
向下移动使用该命令
<use>
时,还可以定位元素的克隆。为了跨浏览器的兼容性,一直使用,
xlink:href
虽然Chrome
其他一些浏览器允许使用缩短的命令href
,但是Safari
这种记录形式不理解2019 年 6 月 19 日更新
在评论中讨论后添加示例
如果您想,正如我从问题中的示例中猜测的那样,在不同的 HTML 页面中重复使用 SVG 箭头,例如在滑块中,那么您可以使用添加 SVG 文件的方法,
<object>
然后重复使用<use>
position 命令,如在第一个答案中。接下来,我们在 HTML 中的任意位置调用 svg:
并且已经可以使用 CSS 规则定位容器。
放在
path
另一个里面svg
,然后移动VueJS
。例子: