Как установить положение верхнего элемента svg?

Допустим, у нас есть очень простой набор вверх как нижеКак установить положение верхнего элемента svg?

<html> 
    <head></head> 

    <body> 
     <script type="text/javascript"> 
      var svg = d3.select("body").append("svg"); 
      svg.attr("width", "100").attr("height", "100").style("border", "1px solid black"); 
     </script> 
    </body> 
</html>

Что определяет положение верхнего элемента SVG? Как это можно было бы изменить?

Когда смотришь вверх по attributes of an svg element вы увидите, что он получил x и y атрибуты, но в обоих случаях он говорит, что

не имеет никакого значения или влияния на внешних элементах SVG

Это имеет смысл, потому что x и y будут определены только относительно родительского элемента svg. Как установить положение сверху?

Спасибо!

источник

2016-08-14 tsotsi

Ваш вопрос остается неясным. Показать код! –

Чтобы изменить положение самого контейнера 'SVG', вы можете использовать правила CSS или встроенного' style'. Например: 'svg {position: relative; top: 100px; left: 100px; } ' – Aziz

Удивительный, спасибо – tsotsi

Вы можете расположить внешний элемент так же, как и любой другой элемент DOM.

var svg = d3.select("body").append("svg"); 
 
svg.attr("width", "100").attr("height", "100").style("border", "1px solid black");

svg { 
 
    position: relative; 
 
    top: 100px; 
 
    left: 50px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

источник

2016-08-14 16:21:15

Как установить положение верхнего элемента svg?

ответ

Смежные вопросы