我已使用Illustrator将jpeg转换为SVG。在六个圆圈内,我希望能够集中一些可以自定义的文本。我尝试了以下代码,但没有任何显示。在这个阶段,我不确定我在哪里出错,因为我遵循了先前在stackoverflow上看到的建议。谁能告诉我我要去哪里错了?
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<g>
<path class="st0" d="M-119-29c283.6,0,567.2,0,850.9,0c0,283.5,0,567.1,0,850.8c-283.6,0-567.2,0-850.9,0
C-119,538.3-119,254.7-119-29z M219.6,132c0-47.5-38.4-86.5-85.2-86.6c-47.9,0-87,38.2-87.1,85.2c0,48.1,38.2,87,85.7,87.1
C180.7,217.6,219.6,179.1,219.6,132z M454.1,217.6c47.4,0,86.5-38.4,86.5-85.2c0-47.9-38.2-87-85.2-87c-48.1,0-87,38.3-87,85.7
C368.4,178.7,406.9,217.6,454.1,217.6z M61.6,417.8c0-47.4-38.5-86.4-85.3-86.4c-47.9,0-86.9,38.3-86.9,85.3
c0,48.1,38.3,86.9,85.8,86.9C22.8,503.6,61.6,465.1,61.6,417.8z M611.5,331.4c-47,0-86.1,38.6-86.2,85.1
c-0.1,48.2,38.2,87.1,85.6,87.2c47.7,0,86.6-38.4,86.7-85.6C697.6,370.1,659.2,331.4,611.5,331.4z M133.9,604.4
c-47.5,0-86.5,38.4-86.5,85.2c0,47.9,38.2,87,85.2,87c48.1,0,87-38.3,87-85.7C219.6,643.3,181.1,604.4,133.9,604.4z M540.6,690.5
c0-47-38.6-86.1-85.1-86.1c-48.2-0.1-87.1,38.2-87.1,85.6c0,47.7,38.4,86.6,85.6,86.6C501.9,776.6,540.6,738.1,540.6,690.5z
M491.2,229.1c17,28.2,33.8,56.2,50.6,84.2c-2.3,1.8-4.5,3.5-7,5.4c12,7.2,23.8,14.2,36.3,21.6c-1.1-14.7-2.2-28.2-3.2-42.2
c-2.8,1.3-5.1,2.5-7.3,3.6c-17-28-34-55.9-51.1-84.1C503.1,221.6,497.1,225.3,491.2,229.1z M13.2,501.1
c17,28.3,33.9,56.3,50.6,84.2c-2.4,1.9-4.5,3.5-6.9,5.4c12.1,7.2,23.8,14.2,36.2,21.6c-1.1-14.6-2.2-28.2-3.2-42.2
c-2.9,1.4-5.2,2.5-7.4,3.5c-17-28-33.9-55.8-51.1-84.1C25.3,493.5,19.4,497.2,13.2,501.1z M81.2,210.8
c-17.7,27.9-35.2,55.4-52.7,82.9c-2-1.1-4.1-2.3-6.5-3.6c-1.1,14.2-2.1,27.7-3.2,42.3c12.3-7.6,23.7-14.6,35.4-21.8
c-2.4-1.9-4.4-3.5-6.7-5.3c17.3-28,34.5-55.9,51.8-84C93,217.7,87.3,214.4,81.2,210.8z M520.5,585.3c17.4-28.2,34.5-56,51.8-84
c-6.3-3.6-12.1-7-18.1-10.5c-17.7,27.8-35.1,55.3-52.7,82.9c-2-1.1-4.1-2.3-6.6-3.6c-1.1,14.1-2.1,27.7-3.2,42.3
c12.4-7.7,23.8-14.7,35.4-21.8C524.9,588.8,522.8,587.1,520.5,585.3z M237.3,144.1c27.5,0,54.6,0,81.9,0c0,3.1,0,5.8,0,9
c13.7-6,26.9-11.8,41.2-18.1c-14.4-6.3-27.6-12.1-41-18c-0.2,3.3-0.3,6.1-0.4,9.3c-27.4,0-54.5,0-81.6,0
C237.3,132.3,237.3,137.7,237.3,144.1z M351.6,676.9c-27.5,0-54.4,0-81.5,0c-0.1-2.9-0.3-5.5-0.4-8.8
c-13.4,5.9-26.5,11.7-40.6,17.9c14.2,6.2,27.3,11.9,40.6,17.8c0.1-3.2,0.3-5.8,0.4-8.9c27.2,0,54.3,0,81.5,0
C351.6,688.8,351.6,683.2,351.6,676.9z"/>
<text x="612" y="802" font-size="14" fill="black">test</text>
<path d="M219.6,132c0,47.2-38.9,85.7-86.6,85.7c-47.4,0-85.7-38.9-85.7-87.1c0-47,39.1-85.2,87.1-85.2
C181.2,45.4,219.6,84.5,219.6,132z" fill ="#206AAE"/>
<text x="0" y="0" font-size="14" fill="black">test</text>
<path d="M454.1,217.6c-47.2,0-85.7-38.9-85.7-86.5c0-47.4,38.9-85.8,87-85.7c47,0,85.3,39.1,85.2,87
C540.6,179.2,501.5,217.6,454.1,217.6z"/>
<text x="0" y="0" font-size="14" fill="black">test</text>
<path d="M61.6,417.8c0,47.3-38.8,85.8-86.4,85.8c-47.5,0-85.8-38.9-85.8-86.9c0-47,39.1-85.3,86.9-85.3
C23.1,331.4,61.6,370.4,61.6,417.8z"/>
<path d="M611.5,331.4c47.6,0,86.1,38.7,86.1,86.7c0,47.2-38.9,85.6-86.7,85.6c-47.4,0-85.6-39-85.6-87.2
C525.4,370,564.5,331.4,611.5,331.4z"/>
<path d="M133.9,604.4c47.2,0,85.7,38.9,85.7,86.5c0,47.4-38.9,85.7-87,85.7c-47,0-85.2-39.1-85.2-87
C47.4,642.8,86.5,604.4,133.9,604.4z"/>
<path d="M540.6,690.5c0,47.6-38.7,86.1-86.6,86.1c-47.2,0-85.6-38.9-85.6-86.6c0-47.4,39-85.6,87.1-85.6
C502,604.4,540.6,643.5,540.6,690.5z"/>
<path d="M491.2,229.1c6-3.8,11.9-7.5,18.2-11.5c17.1,28.2,34.1,56.1,51.1,84.1c2.3-1.1,4.6-2.2,7.3-3.6c1.1,14,2.1,27.5,3.2,42.2
c-12.5-7.4-24.2-14.5-36.3-21.6c2.5-1.9,4.6-3.6,7-5.4C525,285.3,508.2,257.3,491.2,229.1z"/>
<path d="M13.2,501.1c6.2-3.9,12.1-7.6,18.3-11.5c17.2,28.3,34.1,56.1,51.1,84.1c2.2-1.1,4.5-2.2,7.4-3.5c1.1,14,2.1,27.6,3.2,42.2
c-12.4-7.4-24.1-14.4-36.2-21.6c2.4-1.9,4.5-3.6,6.9-5.4C47,557.4,30.2,529.4,13.2,501.1z"/>
<path d="M81.2,210.8c6.1,3.6,11.8,6.9,18.1,10.5c-17.3,28.1-34.5,56-51.8,84c2.2,1.8,4.3,3.4,6.7,5.3
c-11.7,7.2-23.1,14.3-35.4,21.8c1.1-14.6,2.1-28.2,3.2-42.3c2.5,1.4,4.5,2.5,6.5,3.6C46,266.2,63.5,238.7,81.2,210.8z"/>
<path d="M520.5,585.3c2.3,1.8,4.4,3.4,6.7,5.3c-11.6,7.2-23,14.2-35.4,21.8c1.1-14.7,2.1-28.2,3.2-42.3c2.5,1.4,4.5,2.5,6.6,3.6
c17.5-27.6,35-55.1,52.7-82.9c6,3.5,11.8,6.8,18.1,10.5C555,529.3,537.9,557.1,520.5,585.3z"/>
<path d="M237.3,144.1c0-6.3,0-11.8,0-17.8c27.1,0,54.2,0,81.6,0c0.1-3.3,0.3-6,0.4-9.3c13.5,5.9,26.6,11.7,41,18
c-14.3,6.3-27.5,12.1-41.2,18.1c0-3.3,0-5.9,0-9C291.9,144.1,264.8,144.1,237.3,144.1z"/>
<path d="M351.6,676.9c0,6.3,0,11.9,0,18c-27.3,0-54.3,0-81.5,0c-0.1,3.1-0.3,5.7-0.4,8.9c-13.4-5.9-26.4-11.6-40.6-17.8
c14.1-6.2,27.2-11.9,40.6-17.9c0.1,3.2,0.3,5.8,0.4,8.8C297.2,676.9,324.1,676.9,351.6,676.9z"/>
</g>
</g>
</svg>
答案 0 :(得分:2)
由于您的代码非常冗长,所以我认为您不介意简化它。我正在使用JavaScript计算所有圆的位置:
希望对您有帮助。
const SVG_NS = "http://www.w3.org/2000/svg";
const SVG_XLINK = "http://www.w3.org/1999/xlink";
let R = 180;// the radius of the group
let r = 50;// the radius of each circle
let circles = [];// the array of circles date
let lines = [];// the array of lines
let n = 0;//a counter
//create the circles at the vertices of a hexagon
for (let a = 0; a < 2 * Math.PI; a += Math.PI / 3) {
let o = {};
o.cx = R * Math.cos(a);
o.cy = R * Math.sin(a);
o.r = r;
o.id = `c${n}`;
circles.push(o);
draw_SVG_elmt(o, "circle", circ);
n++
}
// for each circle create a line (path) from one circle to another
// in the CSS the line has a stroke-dasharray and a stroke-dashoffset in order to draw only the middle part
for (let i = 1; i < circles.length; i++) {
let o = {};
o.d = `M${circles[i - 1].cx},${circles[i - 1].cy} ${circles[i].cx},${circles[i].cy}`;
o.id = "l" + i;
lines.push(draw_SVG_elmt(o, "path", lin));
}
// every line has an arrow.
for (let i = 0; i < lines.length; i++) {
dummyMarker("marker",.55,lines[i],svg)
}
// for every circle draw the text in the center
// in CSS the text have text-anchor: middle;dominant-baseline: middle;
for (let i = 1; i < circles.length; i++) {
let o = {
x:circles[i].cx,
y:circles[i].cy
};
let txt = draw_SVG_elmt(o, "text", text);
txt.textContent =`test ${i}`
}
function draw_SVG_elmt(o, tagname, parent) {
var el = document.createElementNS(SVG_NS, tagname);
for (var name in o) {
if (o.hasOwnProperty(name)) {
el.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(el);
return el;
}
// a function to draw a triangle at the choosen percent in a path
function dummyMarker(marker,markerPos,path,parent){
/*0 < markerPos <= 1*/
let l = path.getTotalLength();
let d1 = l * markerPos;
let point1 = path.getPointAtLength(d1);
let point2 = path.getPointAtLength(d1 - .1);
let angle = Math.atan2( (point1.y - point2.y),(point1.x - point2.x) );
let use = document.createElementNS(SVG_NS, 'use');
use.setAttributeNS(SVG_XLINK, 'xlink:href', `#${marker}`);
parent.appendChild(use);
use.setAttributeNS(null,"transform",`translate(${point1.x},${point1.y})
rotate(${angle*180/Math.PI})`)
}
svg {
width: 300px;
border: 1px solid;
font-family: arial;
}
path {
stroke: black;
fill: none;
stroke-dasharray: 60;
stroke-dashoffset: 60;
stroke-width: 9;
}
#marker{stroke: none;fill:black;}
#text text {
fill: white;
text-anchor: middle;
dominant-baseline: middle;
font-size: 28px;
}
#c4 {
fill: red;
}
<svg id="svg" viewBox="-250 -250 500 500">
<defs>
<path id="marker" d="M0,0L0,-15 30,0 0,15z" />
</defs>
<g id="circ"></g>
<g id="lin"></g>
<g id="arrows"></g>
<g id="text"></g>
</svg>
如果您对javascript不满意,可以从检查器获取代码。 您将得到如下内容:
svg {
width: 300px;
border: 1px solid;
font-family: arial;
}
path {
stroke: black;
fill: none;
stroke-dasharray: 60;
stroke-dashoffset: 60;
stroke-width: 9;
}
#marker{stroke: none;fill:black;}
#text text {
fill: white;
text-anchor: middle;
dominant-baseline: middle;
font-size: 28px;
}
#c4 {
fill: red;
}
<svg id="svg" viewBox="-250 -250 500 500">
<defs>
<path id="marker" d="M0,0L0,-15 30,0 0,15z"></path>
</defs>
<g id="circ">
<circle cx="90" cy="155.88" r="50" id="c1"></circle>
<circle cx="-90" cy="155.88" r="50" id="c2"></circle>
<circle cx="-180" cy="2.204" r="50" id="c3"></circle>
<circle cx="-90" cy="-155.88" r="50" id="c4"></circle>
<circle cx="90" cy="-155.88" r="50" id="c5"></circle>
<circle cx="180" cy="-2.04" r="50" id="c6"></circle>
</g>
<g id="lin">
<path d="M180,0 90,155.88" id="l1"></path>
<path d="M90,155.88 -90,155.88" id="l2"></path>
<path d="M-90,155.88 -180,2.204" id="l3"></path>
<path d="M-180,2.204 -90,-155.88" id="l4"></path>
<path d="M-90,-155.88 90,-155.88" id="l5"></path>
<path d="M90,-155.88 180,-2.04" id="l6"></path>
</g>
<g id="arrows">
<use xlink:href="#marker" transform="translate(130.5,85.736) rotate(120)"></use>
<use xlink:href="#marker" transform="translate(-9,155.884) rotate(180)"></use>
<use xlink:href="#marker" transform="translate(-139.5,70.148) rotate(-120)"></use>
<use xlink:href="#marker" transform="translate(-130.5,-85.736) rotate(-60)"></use>
<use xlink:href="#marker" transform="translate(9,-155.88) rotate(0)"></use>
<use xlink:href="#marker" transform="translate(139.5,-70.145) rotate(60)"></use>
</g>
<g id="text">
<text x="90" y="155.88">test 1</text>
<text x="-90" y="155.88">test 2</text>
<text x="-180" y="2.204">test 3</text>
<text x="-90" y="-155.88">test 4</text>
<text x="90" y="-155.88">test 5</text>
<text x="180" y="-2.04">test 6</text>
</g>
</svg>
答案 1 :(得分:1)
将<text>
节点放置在其他几何图形之后,以防止在图形后面隐藏文本。
您的文本节点的神秘坐标x
和y
位于svg视口之外。
您的viewBox
隐藏了svg的一部分,我已将其向左移动并向右扩展。
标记中的第一个<path>
-大纲,我没有删除它,但是不是必需的,可以使用svg
的属性stroke
实现此效果其他形状。
我已将您的示例更正为:
<svg viewBox="-115 0 840 800" width='100vw'>
<path d="M219.6,132c0,47.2-38.9,85.7-86.6,85.7c-47.4,0-85.7-38.9-85.7-87.1c0-47,39.1-85.2,87.1-85.2
C181.2,45.4,219.6,84.5,219.6,132z" fill="#206AAE"/>
<path d="M454.1,217.6c-47.2,0-85.7-38.9-85.7-86.5c0-47.4,38.9-85.8,87-85.7c47,0,85.3,39.1,85.2,87
C540.6,179.2,501.5,217.6,454.1,217.6z"/>
<path d="M61.6,417.8c0,47.3-38.8,85.8-86.4,85.8c-47.5,0-85.8-38.9-85.8-86.9c0-47,39.1-85.3,86.9-85.3
C23.1,331.4,61.6,370.4,61.6,417.8z"/>
<path d="M611.5,331.4c47.6,0,86.1,38.7,86.1,86.7c0,47.2-38.9,85.6-86.7,85.6c-47.4,0-85.6-39-85.6-87.2
C525.4,370,564.5,331.4,611.5,331.4z"/>
<path d="M133.9,604.4c47.2,0,85.7,38.9,85.7,86.5c0,47.4-38.9,85.7-87,85.7c-47,0-85.2-39.1-85.2-87
C47.4,642.8,86.5,604.4,133.9,604.4z"/>
<path d="M540.6,690.5c0,47.6-38.7,86.1-86.6,86.1c-47.2,0-85.6-38.9-85.6-86.6c0-47.4,39-85.6,87.1-85.6
C502,604.4,540.6,643.5,540.6,690.5z"/>
<path d="M491.2,229.1c6-3.8,11.9-7.5,18.2-11.5c17.1,28.2,34.1,56.1,51.1,84.1c2.3-1.1,4.6-2.2,7.3-3.6c1.1,14,2.1,27.5,3.2,42.2
c-12.5-7.4-24.2-14.5-36.3-21.6c2.5-1.9,4.6-3.6,7-5.4C525,285.3,508.2,257.3,491.2,229.1z"/>
<path d="M13.2,501.1c6.2-3.9,12.1-7.6,18.3-11.5c17.2,28.3,34.1,56.1,51.1,84.1c2.2-1.1,4.5-2.2,7.4-3.5c1.1,14,2.1,27.6,3.2,42.2
c-12.4-7.4-24.1-14.4-36.2-21.6c2.4-1.9,4.5-3.6,6.9-5.4C47,557.4,30.2,529.4,13.2,501.1z"/>
<path d="M81.2,210.8c6.1,3.6,11.8,6.9,18.1,10.5c-17.3,28.1-34.5,56-51.8,84c2.2,1.8,4.3,3.4,6.7,5.3
c-11.7,7.2-23.1,14.3-35.4,21.8c1.1-14.6,2.1-28.2,3.2-42.3c2.5,1.4,4.5,2.5,6.5,3.6C46,266.2,63.5,238.7,81.2,210.8z"/>
<path d="M520.5,585.3c2.3,1.8,4.4,3.4,6.7,5.3c-11.6,7.2-23,14.2-35.4,21.8c1.1-14.7,2.1-28.2,3.2-42.3c2.5,1.4,4.5,2.5,6.6,3.6
c17.5-27.6,35-55.1,52.7-82.9c6,3.5,11.8,6.8,18.1,10.5C555,529.3,537.9,557.1,520.5,585.3z"/>
<path d="M237.3,144.1c0-6.3,0-11.8,0-17.8c27.1,0,54.2,0,81.6,0c0.1-3.3,0.3-6,0.4-9.3c13.5,5.9,26.6,11.7,41,18
c-14.3,6.3-27.5,12.1-41.2,18.1c0-3.3,0-5.9,0-9C291.9,144.1,264.8,144.1,237.3,144.1z"/>
<path d="M351.6,676.9c0,6.3,0,11.9,0,18c-27.3,0-54.3,0-81.5,0c-0.1,3.1-0.3,5.7-0.4,8.9c-13.4-5.9-26.4-11.6-40.6-17.8
c14.1-6.2,27.2-11.9,40.6-17.9c0.1,3.2,0.3,5.8,0.4,8.8C297.2,676.9,324.1,676.9,351.6,676.9z"/>
<path stroke="red" stroke-width=3 fill="none" d="M-119-29c283.6,0,567.2,0,850.9,0c0,283.5,0,567.1,0,850.8c-283.6,0-567.2,0-850.9,0
C-119,538.3-119,254.7-119-29z M219.6,132c0-47.5-38.4-86.5-85.2-86.6c-47.9,0-87,38.2-87.1,85.2c0,48.1,38.2,87,85.7,87.1
C180.7,217.6,219.6,179.1,219.6,132z M454.1,217.6c47.4,0,86.5-38.4,86.5-85.2c0-47.9-38.2-87-85.2-87c-48.1,0-87,38.3-87,85.7
C368.4,178.7,406.9,217.6,454.1,217.6z M61.6,417.8c0-47.4-38.5-86.4-85.3-86.4c-47.9,0-86.9,38.3-86.9,85.3
c0,48.1,38.3,86.9,85.8,86.9C22.8,503.6,61.6,465.1,61.6,417.8z M611.5,331.4c-47,0-86.1,38.6-86.2,85.1
c-0.1,48.2,38.2,87.1,85.6,87.2c47.7,0,86.6-38.4,86.7-85.6C697.6,370.1,659.2,331.4,611.5,331.4z M133.9,604.4
c-47.5,0-86.5,38.4-86.5,85.2c0,47.9,38.2,87,85.2,87c48.1,0,87-38.3,87-85.7C219.6,643.3,181.1,604.4,133.9,604.4z M540.6,690.5
c0-47-38.6-86.1-85.1-86.1c-48.2-0.1-87.1,38.2-87.1,85.6c0,47.7,38.4,86.6,85.6,86.6C501.9,776.6,540.6,738.1,540.6,690.5z
M491.2,229.1c17,28.2,33.8,56.2,50.6,84.2c-2.3,1.8-4.5,3.5-7,5.4c12,7.2,23.8,14.2,36.3,21.6c-1.1-14.7-2.2-28.2-3.2-42.2
c-2.8,1.3-5.1,2.5-7.3,3.6c-17-28-34-55.9-51.1-84.1C503.1,221.6,497.1,225.3,491.2,229.1z M13.2,501.1
c17,28.3,33.9,56.3,50.6,84.2c-2.4,1.9-4.5,3.5-6.9,5.4c12.1,7.2,23.8,14.2,36.2,21.6c-1.1-14.6-2.2-28.2-3.2-42.2
c-2.9,1.4-5.2,2.5-7.4,3.5c-17-28-33.9-55.8-51.1-84.1C25.3,493.5,19.4,497.2,13.2,501.1z M81.2,210.8
c-17.7,27.9-35.2,55.4-52.7,82.9c-2-1.1-4.1-2.3-6.5-3.6c-1.1,14.2-2.1,27.7-3.2,42.3c12.3-7.6,23.7-14.6,35.4-21.8
c-2.4-1.9-4.4-3.5-6.7-5.3c17.3-28,34.5-55.9,51.8-84C93,217.7,87.3,214.4,81.2,210.8z M520.5,585.3c17.4-28.2,34.5-56,51.8-84
c-6.3-3.6-12.1-7-18.1-10.5c-17.7,27.8-35.1,55.3-52.7,82.9c-2-1.1-4.1-2.3-6.6-3.6c-1.1,14.1-2.1,27.7-3.2,42.3
c12.4-7.7,23.8-14.7,35.4-21.8C524.9,588.8,522.8,587.1,520.5,585.3z M237.3,144.1c27.5,0,54.6,0,81.9,0c0,3.1,0,5.8,0,9
c13.7-6,26.9-11.8,41.2-18.1c-14.4-6.3-27.6-12.1-41-18c-0.2,3.3-0.3,6.1-0.4,9.3c-27.4,0-54.5,0-81.6,0
C237.3,132.3,237.3,137.7,237.3,144.1z M351.6,676.9c-27.5,0-54.4,0-81.5,0c-0.1-2.9-0.3-5.5-0.4-8.8
c-13.4,5.9-26.5,11.7-40.6,17.9c14.2,6.2,27.3,11.9,40.6,17.8c0.1-3.2,0.3-5.8,0.4-8.9c27.2,0,54.3,0,81.5,0
C351.6,688.8,351.6,683.2,351.6,676.9z"/>
<text x="130" y="135" dominant-baseline="middle" text-anchor="middle" font-size="55" fill="red">test</text>
<text x="455" y="135" dominant-baseline="middle" text-anchor="middle" font-size="55" fill="white">test</text>
<text x="610" y="420" dominant-baseline="middle" text-anchor="middle" font-size="55" fill="white">test</text>
<text x="-30" y="420" dominant-baseline="middle" text-anchor="middle" font-size="55" fill="white">test</text>
<text x="455" y="690" dominant-baseline="middle" text-anchor="middle" font-size="55" fill="white">test</text>
<text x="130" y="690" dominant-baseline="middle" text-anchor="middle" font-size="55" fill="white">test</text>
</svg>