Возникли проблемы при добавлении изображения в тег svg -> tspan - PullRequest
Новая
       0

Возникли проблемы при добавлении изображения в тег svg -> tspan

0 голосов
/ 12 февраля 2020

Я пытался следовать советам, которые получили другие пользователи по этому поводу, но кажется, что я не понимаю это правильно, или это невозможно сделать вообще. Я пытаюсь добавить изображение в текстовый тег SVG с помощью тега tspan. Ценю любые предложения.

Вот фрагмент: https://jsfiddle.net/mLkts2p5/

*{
  box-sizing:border-box;
}

html,
body {

  height: 100vh;
  width: 100vw;
  padding: 0%;
  margin: 0%;
  background-color: rgba(16, 14, 23, 1);
}

<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
    <link rel="stylesheet" href="test.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  </head>
  <body>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="4vh" viewBox="0 0 100% 3vh" class="headerrow">
  <text class="textrowdata1" x="1%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">Name<tspan id="pin"></tspan></text>
  <text class="textrowdata1" x="16%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">1111</text>
  <text class="textrowdata1" x="21%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">2222</text>
  <text class="textrowdata1" x="28%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">3333</text>
  <text class="textrowdata1" x="34%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">4444</text>
</svg>

<script>

let elem = document.createElement("img");
elem.src = "https://media.istockphoto.com/vectors/elephant-head-vector-id1175041493";
elem.setAttribute("height", "200px");
elem.setAttribute("width", "200px");
document.getElementById("pin").appendChild(elem);

</script>

</body>

</html>

1 Ответ

1 голос
/ 12 февраля 2020

Используя document.createElementNS(), он работал, но не внутри <text>.

Создает <g id="pin"></g> вне текста и добавляет к нему изображение. проверьте фрагмент. 

var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
img.setAttributeNS(null, 'height', '20');
img.setAttributeNS(null, 'width', '20');
img.setAttributeNS(null, 'id', 'theID');
img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://media.istockphoto.com/vectors/elephant-head-vector-id1175041493');
img.setAttributeNS(null, 'x', '0');
img.setAttributeNS(null, 'y', '0');

document.getElementById("pin").append(img);
* {
  box-sizing: border-box;
}

html,
body {

  height: 100vh;
  width: 100vw;
  padding: 0%;
  margin: 0%;
  background-color: rgba(16, 14, 23, 1);
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  </head>

  <body>

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="4vh" class="headerrow">
      

        <text class="textrowdata1" x="1%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">Name</text><g id="pin"></g>
      
      <text class="textrowdata1" x="16%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">1111</text>
      <text class="textrowdata1" x="21%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">2222</text>
      <text class="textrowdata1" x="28%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">3333</text>
      <text class="textrowdata1" x="34%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">4444</text>
    </svg>


  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...