Страницы

Поиск по вопросам

среда, 29 января 2020 г.

Можно ли у SVG элемента или его клона сменить позицию?

#html #css #вёрстка #svg #svg_спрайт 


Допустим есть некий холст:




И есть некий элемент:




Положение которого, зависит от координат.

А если этих самых координат вагон и маленькая тележка, не переписывать же их все,
чтобы элемент отображался не в верхнем левом углу, а в правом нижнем углу холста.

Есть ли такой элемент контейнер в SVG в который можно поместить этот элемент path,
и двигать его куда угодно и как угодно?


Ответы

Ответ 1


Используйте для  перемещения одного элемента SVG или группы элементов  команду transform="translate(x
y)"    

Ниже в примере полоса с надписью Start перемещена на 200px вниз



	

  
  
        
   
 
   Start
    
       
      
   
 
   Start
    
  
  
     




При использовании команды  тоже есть возможность позиционировать клоны элементов 



  


 
 
 



 






Для кроссбраузерности всегда используйте xlink:href хотя Chrome и некоторые другие
браузеры позволяют использовать укороченную команду href, но Safari такую форму записи
не понимает

Update 19.06.2019  

Добавлен пример после обсуждения в комментариях 


Позиционируем всю группу элементов
Одновременно закрашиваем, уменьшаем и передвигаем каждый треугольник  





 
 






 






Ответ 2


Если вы хотите, как я догадываюсь из примера в вопросе, использовать стрелки SVG
многократно на разных HTML страницах, например в слайдерах, то можно использовать метод
добавления SVG файлов с помощью  с последующим многократным использованием
с помощью команды  c позиционированием, как в первом ответе.  


   Your browser does not support SVG
 


Далее вызываем svg в любом месте HTML: 





      
  

  


И уже контейнер можно позиционировать правилами CSS.


Ответ 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;
}





  

    
  


  

    
      
    

  














Автор:



на






















Ярлыки:
,
,
,
,
,

















Комментариев нет:















Отправить комментарий

















        
      








Подписаться на:
Комментарии к сообщению (Atom)