Как вставить SVG в SVG? - PullRequest
Новая
       2

Как вставить SVG в SVG?

0 голосов
/ 22 октября 2018

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

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Не надо кучу SVG.Вместо этого вы должны просто поместить все свои фигуры в один большой SVG.

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

<!DOCTYPE html>
<html>
<body>

<svg width="550" height="400">
  <g>
    <rect width="300" height="30" style="fill:rgb(255,0,0);" />
    <text x="10" y="20" fill="white">Fatality</text>
  </g>

  <g transform="translate(0,40)">
    <rect width="300" height="30" style="fill:rgb(255,0,0);" />
    <text x="10" y="20" fill="white">Lost Time Incidents</text>
  </g>

  <g transform="translate(0,80)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    <text x="10" y="20" fill="white">Restricted Work Cases</text>
  </g>

  <g transform="translate(0,120)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    <text x="10" y="20" fill="white">Medical Treatment Cases</text>
  </g>

  <g transform="translate(0,160)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    <text x="10" y="20" fill="white">First Aid Cases</text>
  </g>

  <g transform="translate(0,200)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    <text x="10" y="20" fill="white">RTA Incident</text>
  </g>

  <g transform="translate(0,240)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    <text x="10" y="20" fill="white">Environment Incident</text>
  </g>

  <g transform="translate(0,280)">
    <rect width="300" height="30" style="fill:rgb(102,204,0);" />
    <text x="10" y="20" fill="white">Near Miss</text>
  </g>

  <g transform="translate(0,320)">
    <rect width="300" height="30" style="fill:rgb(102,204,0);" />
    <text x="10" y="20" fill="white">Unsafe Acts & Conditions</text>
  </g>

  <g transform="translate(0,360)">
    <rect width="300" height="30" style="fill:rgb(102,178,255);" />
    <text x="10" y="20" fill="white">Man Hours</text>
  </g>

  <polygon points="350,0, 550,400, 150,400" style="fill:white;stroke:black;stroke-width:1" />

</svg>
0 голосов
/ 22 октября 2018

Чтобы встроить один svg в другой svg, вы должны использовать его так же, как и элемент <symbol>. 

const SVG_NS = 'http://www.w3.org/2000/svg';
let colors = [
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(102,204,0)",
  "rgb(102,204,0)",
  "rgb(102,178,255)"
];


let angle = Math.atan2(215,430);
let n = 0;
let offset = 10;// distance between the border of the triangle and the start of the rectangle

for(let y = 40; y < 430; y+= 40){
  
  let halfW = Math.tan(angle)*y - offset;
  let o = {
    x:430/2 - halfW,
    y: y,
    width: 2*halfW,
    height: 30,
    fill:colors[n]
  }
  
  drawRect(o, polys);
  n++;
}

function drawRect(o, parent) {

  let rect = document.createElementNS(SVG_NS, 'rect');
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      rect.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(rect);
  return rect;
}
svg{max-width:100vh}
<svg viewBox="0 0 600 600" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="400" height="30" y="40">
  <rect width="300" height="30" style="fill:rgb(255,0,0);" />
   <text x="0" y="15" fill="white">Fatality</text>
</svg>
<svg width="400" height="30" y="80">
   <rect width="300" height="30" style="fill:rgb(255,0,0);" />
   <text x="0" y="15" fill="white">Lost Time Incidents</text>
</svg>
<svg width="400" height="30" y="120">
  <rect width="300" height="30" style="fill:rgb(255,128,0);" />
   <text x="0" y="15" fill="white">Restricted Work Cases</text>
</svg> 
  <svg width="400" height="30" y="160">
  <rect width="300" height="30" style="fill:rgb(255,128,0);" />
   <text x="0" y="15" fill="white">Medical Treatment Cases</text>
</svg>
<svg width="400" height="30" y="200">
  <rect width="300" height="30" style="fill:rgb(255,128,0);" />
   <text x="0" y="15" fill="white">First Aid Cases</text>
</svg>
<svg width="400" height="30"  y="240">
  <rect width="300" height="30" style="fill:rgb(255,128,0);" />
  <text x="0" y="15" fill="white">RTA Incident</text>
</svg>  
<svg width="400" height="30" y="280">
  <rect width="300" height="30" style="fill:rgb(255,128,0);" />
  <text x="0" y="15" fill="white">Environment Incident</text>
</svg>  
<svg width="400" height="30" y="320">
  <rect width="300" height="30" style="fill:rgb(102,204,0);" />
   <text x="0" y="15" fill="white">Near Miss</text>
</svg>  
<svg width="400" height="30" y="360">
  <rect width="300" height="30" style="fill:rgb(102,204,0);" />
   <text x="0" y="15" fill="white">Unsafe Acts & Conditions</text>
</svg>
<svg width="400" height="30" y="400">
  <rect width="300" height="30" style="fill:rgb(102,178,255);" />
   <text x="0" y="15" fill="white">Man Hours</text>
</svg>  
  
<svg id="polys" height="430" width="430" viewBox="0 0 430 430" x="160"  >
  <polygon points="215,0, 0,430 430,430 215,0" style="fill:white;stroke:red;stroke-width:1" />

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

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

...