Question

我必须执行此任务，其中我必须将一个svg嵌入到另一个svg中。由于我是SVG的新手，所以我已经完成了多边形和矩形部分，但是在将这两个部分组合在一起时，我面临着问题。我要完成我的工作。

Answer 1

没有一堆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>

Answer 2

要将一个svg嵌入到另一个svg中，您必须像使用[hduser@secondary ~]$ ps -ef | grep -i runjar | grep -v grep hduser 110398 1 0 Nov11 ? 00:07:15 /opt/jdk1.8.0_77//bin/java -Dproc_jar -Xmx1000m -Dhadoop.log.dir=/home/hduser/hadoop/logs -Dyarn.log.dir=/home/hduser/hadoop/logs -Dhadoop.log.file=yarn.log -Dyarn.log.file=yarn.log -Dyarn.home.dir= -Dyarn.id.str= -Dhadoop.root.logger=INFO,console -Dyarn.root.logger=INFO,console -Dyarn.policy.file=hadoop-policy.xml -Dhadoop.log.dir=/home/hduser/hadoop/logs -Dyarn.log.dir=/home/hduser/hadoop/logs -Dhadoop.log.file=yarn.log -Dyarn.log.file=yarn.log -Dyarn.home.dir=/home/hduser/hadoop -Dhadoop.home.dir=/home/hduser/hadoop -Dhadoop.root.logger=INFO,console -Dyarn.root.logger=INFO,console -classpath /home/hduser/hadoop/etc/hadoop:/home/hduser/hadoop/etc/hadoop:/home/hduser/hadoop/etc/hadoop:/home/hduser/hadoop/share/hadoop/common/lib/*:/home/hduser/hadoop/share/hadoop/common/*:/home/hduser/hadoop/share/hadoop/hdfs:/home/hduser/hadoop/share/hadoop/hdfs/lib/*:/home/hduser/hadoop/share/hadoop/hdfs/*:/home/hduser/hadoop/share/hadoop/yarn/lib/*:/home/hduser/hadoop/share/hadoop/yarn/*:/home/hduser/hadoop/share/hadoop/mapreduce/lib/*:/home/hduser/hadoop/share/hadoop/mapreduce/*:/home/hduser/hadoop/contrib/capacity-scheduler/*.jar:/home/hduser/hadoop/share/hadoop/yarn/*:/home/hduser/hadoop/share/hadoop/yarn/lib/* org.apache.hadoop.util.RunJar abc.jar def.mydriver2 /raw_data /mr_output/元素一样使用它。

<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嵌入svg？

2 个答案: