主页 / 问题 / 993833
Accepted
Air
Asked:2020-06-18 12:10:23 +0000 UTC2020-06-18 12:10:23 +0000 UTC

是否可以更改 SVG 元素或其克隆的位置？

  • 772

假设我们有一个画布：

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

html

3 个回答

  1. Best Answer

    使用命令移动单个 SVG 元素或一组元素transform="translate(x y)"

    在下面的示例中，标有“开始”的栏已200px向下移动

    <style>
    .container {
	 width:50%;
	 height:50%
     	  }
  svg {background-color: #d3d3d3;}
	  
</style>	
<div class="container">  
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     viewBox="0 0 300 300" >  
      <g id="gr1" text-anchor="middle" >  
   <!-- кнопка -->
 <rect id="rect1" x="0" y="0" width="100%" height="30"  fill="#1A2153"/>
  <text id="txt1" x="150" y="22" font-size="28" stroke="white" fill="white"  pointer-events="none" > Start</text>
  </g>  
       <!-- Перемещаем вниз-->
    <g id="gr1" text-anchor="middle" transform="translate(0 200)" >  
   <!-- кнопка -->
 <rect id="rect1" x="0" y="0" width="100%" height="30"  fill="#1A2153"/>
  <text id="txt1" x="150" y="22" font-size="28" stroke="white" fill="white"  pointer-events="none" > Start</text>
  </g>  
  
  </div>

    使用该命令<use>时，还可以定位元素的克隆。 

      


 <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%">
 <defs>
 <path id="p1" d="M0 0 55 122 0 300 300"/>
</defs>

<use xlink:href="#p1" x="0" y="0" />
<use xlink:href="#p1" x="100" y="0" fill="red" /> 
<use xlink:href="#p1" x="200" y="0" fill="green" />
</svg>

    为了跨浏览器的兼容性，一直使用，xlink:href虽然Chrome其他一些浏览器允许使用缩短的命令href，但是Safari这种记录形式不理解

    2019 年 6 月 19 日更新

    在评论中讨论后添加示例

    • 定位整个元素组
    • 同时绘制、缩小和移动每个三角形 

    <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%">
 <defs>
 <path id="p1" d="M0 0 55 122 0 300 300"/>
</defs>

<!-- Передвигаем вправо всю группу треугольников -->
<g transform="translate(30 0)" >
<!-- Одновременно закрашиваем, уменьшаем и передвигаем каждый треугольник -->
<use xlink:href="#p1" x="0" y="0" />
<use xlink:href="#p1" x="100" y="0" transform="translate(0 30) scale(0.75)" fill="red" /> 
<use xlink:href="#p1" x="200" y="0" transform="translate(30 60) scale(0.5)" fill="green" />
<use xlink:href="#p1" x="200" y="0" transform="translate(120 90) scale(0.25)" fill="purple" />

</g>

    • 5

  2. 如果您想，正如我从问题中的示例中猜测的那样，在不同的 HTML 页面中重复使用 SVG 箭头，例如在滑块中，那么您可以使用添加 SVG 文件的方法，<object>然后重复使用<use>position 命令，如在第一个答案中。 

    <object type="image/svg+xml" data="sprite.svg" width="200" height="200" >
   Your browser does not support SVG
</object>

    接下来，我们在 HTML 中的任意位置调用 svg：

    <div class="container">

<svg>
      <use  xlink:href="sprite.svg"#icons--icon1"></use>
</svg>  
</div>

    并且已经可以使用 CSS 规则定位容器。

    • 3

  3. 放在path另一个里面svg，然后移动VueJS。例子：

    "use strict";

new Vue({
  el: "#js-crazy-rectange",
  computed: {
    // вычисляемое свойство - цвет
    fillColorServer: function() {
      return 'green';
    }
  },
  methods: {
    // назначаем новые координаты
    newPos() {
      this.posX = Math.ceil(Math.random() * 150);
      this.posY = Math.ceil(Math.random() * 150);
    }
  },
  // начальные координаты
  data: {
    posX: 0,
    posY: 0
  }
});
    .m-b-1 {
  margin-bottom: 10px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="js-crazy-rectange">

  <div>
    <button class="m-b-1" @click="newPos()">Click me</button>
  </div>

  <svg class="pulse-svg" width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <svg :x="posX" :y="posY" width="50" height="50">
      <path v-bind:style="{ fill: fillColorServer }" d="M50,0 0,0 0,50 50,50 z"/>
    </svg>

  </svg>

</div>

    • 2

相关问题