Блог

Главная - Вопросы по программированию - Центрирование SVG-изображения внутри родительского SVG

Центрирование SVG-изображения внутри родительского SVG

#javascript #html #svg

#javascript #HTML #svg

Вопрос:

Я готовлю презентацию в HTML / CSS / Javascript, используя следующий код. Я хочу центрировать SVG-изображение в основном SVG. Насколько я понимаю, окно просмотра основного SVG устанавливает новую систему координат. Итак, когда я пытаюсь центрировать изображение, используя половину его ширины (аналогично «text-anchor =»middle»») Я не получаю того, что ожидаю, изображение сдвинуто, но недостаточно, чтобы быть в центре. 

 <!doctype html>
<meta charset="utf-8">

<script src="./js/d3.js"></script>

<style>

body {
  margin:0;
  /*border: 5px solid green; /*for testing*/
  display:block;
  padding-top: 0px;
  height: 100vh;
  background-color: rgba(0,0,0,1);
  font-family: Helvetica;
}

body svg {
  /*border: 1px solid #C1543D;*/ /*for testing*/
  display:block;
  margin: auto;
}

.slideBackground {
  fill: white;
}

.slideHeader{
  font-size: 38;
}

</style>



<body>


  <svg width="100%" height="100%" viewBox="0 0 1024 768"> <!-- 1024 and 768 are expressed in units of the SVG's viewport (NOT pixels)-->

    <rect class="slideBackground" x="0%" y="0%" width="100%" height="100%"/> <!-- rect for viewbox-->

    <g id="equation">
      <svg x="50%" y="70%" width="30%" height="6%" viewBox="0 0 35 5" preserveAspectRatio="xMidYMid">
        <image x="0" y="0" width="100%" height="100%" xlink:href="bayesTheorem.svg"></image>
      </svg>
    </g>

  </svg>

</body>

<script>

var eqSVG = document.getElementById("equation");
var rec = eqSVG.getBoundingClientRect().width;

d3.select("#equation").attr("transform", "translate("   (-rec/2)   ",0)")

</script>

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

1. Почему вы делаете это с помощью скрипта?

2. Для интерактивности и веселья!

3. Для чего нужна звезда (*)?

4. Извините, это опечатка

5. Я исправил это и добавил полный скрипт

Ответ №1:

Я исправил проблему. Я просто изменил изображение x = «0» на изображение =»-50%» и удалил выделение D3