如何在此SVG中显示文本旁边的十字架？

时间：2017-05-30 12:46:02

标签： html css svg

我有一个SVG文件，其中包含很多像这样的元素，我想在每个标题后添加一个交叉。我在这里创建https://codepen.io/desandro/pen/jEgvpo如何添加十字架，但我无法在标题旁边显示它 如何在标题旁边显示它？ 我知道它与d="..."有关，但我不能静态指定值

.close-x {
  stroke: black;
  fill: transparent;
  stroke-linecap: round;
  stroke-width: 5;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentscripttype="application/ecmascript" contentstyletype="text/css" height="555px" preserveAspectRatio="none" style="width:1181px;height:555px;" version="1.1" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g>
<!--entity cadvisor-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="97" x="133.675" y="8"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="210.675" y="13"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="15"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="19"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="148.675" y="41.3027">cadvisor</text>
<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />

<!--entity cadvisor2-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="104" x="433.175" y="377"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="517.175" y="382"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="384"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="388"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="64" x="448.175" y="410.3027">cadvisor2</text>
<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />

</g>
</svg>

2 个答案:

答案 0 :(得分：2)

您可以在<defs>部分中定义十字，并在<use>元素的主体中重复使用它。设置交叉使用x和y attribytes的新位置。请参阅下面的代码段。

.close-x {
  stroke: black;
  fill: transparent;
  stroke-linecap: round;
  stroke-width: 5;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentscripttype="application/ecmascript" contentstyletype="text/css" height="555px" preserveAspectRatio="none" style="width:1181px;height:555px;" version="1.1" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify">
<defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter>
<path id="mycross" class="close-x" d="M 0,0 L 20,20 M 20,0 L 0,20" />
</defs>
<g>
<!--entity cadvisor-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="97" x="133.675" y="8"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="210.675" y="13"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="15"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="19"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="148.675" y="41.3027">cadvisor</text>
<use xlink:href="#mycross" x="205" y="30"/>

<!--entity cadvisor2-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="104" x="433.175" y="377"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="517.175" y="382"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="384"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="388"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="64" x="448.175" y="410.3027">cadvisor2</text>
<use xlink:href="#mycross" x="515" y="400"/>

</g>
</svg>

答案 1 :(得分：2)

使用此路径

第一次转发

<path class="close-x" d="M 140,12 L 150,25 M 150,12 L 140,25"></path>

第二次转发

<path class="close-x" d="M 440,380 L 450,392 M 450,380 L 440,392"></path> 

.close-x {
  stroke: black;
  fill: transparent;
  stroke-linecap: round;
  stroke-width: 2;
}

<强>段 

.close-x {
  stroke: black;
  fill: transparent;
  stroke-linecap: round;
  stroke-width: 2;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentscripttype="application/ecmascript" contentstyletype="text/css" height="555px" preserveAspectRatio="none" style="width:1181px;height:555px;" version="1.1" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g>
<!--entity cadvisor-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="97" x="133.675" y="8"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="210.675" y="13"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="15"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="19"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="148.675" y="41.3027">cadvisor</text>
<path class="close-x" d="M 140,12 L 150,25 M 150,12 L 140,25"></path>

<!--entity cadvisor2-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="104" x="433.175" y="377"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="517.175" y="382"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="384"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="388"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="64" x="448.175" y="410.3027">cadvisor2</text>
<path class="close-x" d="M 440,380 L 450,392 M 450,380 L 440,392"></path>

</g>
</svg>

相关问题
最新问题