console 命令行工具 X clear

console

var draw = SVG('drawing')


var dom = draw.select('[name=QrCode_CheckTicket]')

var bbox = dom.bbox()

var group = draw.group()
let { x, y, width, height } = bbox
x -= 3
y -= 3
width += 6
height += 6

// path
var path = group.path(`M${x} ${y} H${x + width} V${y+ height} H${x} z`)
path.attr({
    fill: 'none',
    stroke: '#FF0000',
    'stroke-width': '1',
    'stroke-dasharray': '5,5',
    style: 'pointer-events:none'
})

// rect 
var rect = group.rect()


// text
var text = group.text('检票码')
text.attr({
    x: x + 10,
    y: y - 12,
    fill: '#FFFFFF'
}).font({
    size: 9,
})
var textBox = text.bbox()

rect.attr({
    fill: "#ff0000",
    x: textBox.x - 2,
    y: textBox.y - 2,
    width: textBox.width+4,
    height: textBox.height+4
}).radius(2)

<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
</head>
<body>

      <svg id="drawing" width="589" height="302" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
        <g>
        <title>Layer 1</title>
        <image id="bgImage" xlink:href="https://p1.meituan.net/myvideodistribute/0bf41fa7d7de14f81c87d1d3add2d44d879967.jpg" width="156mm" height="80mm" y="-1.99945" x="0.00005"/>
        <text id="aabbcc" xml:space="preserve" text-anchor="start" font-family="宋体" font-size="20" stroke-width="0" fill="#000000" name="performanceName" id="performanceName" y="79" x="142">通票票版第二版商品1</text>
        <text xml:space="preserve" text-anchor="start" font-family="宋体" font-size="16" id="svg_1" y="145.63779" x="70" stroke-width="0" fill="#000000">时间：</text>
        <text xml:space="preserve" text-anchor="start" font-family="宋体" font-size="16" id="svg_2" y="117.63779" x="70" stroke-width="0" fill="#000000">场次：</text>
        <text id="svg_3" xml:space="preserve" text-anchor="start" font-family="宋体" font-size="16" y="175.63779" x="70" stroke-width="0" fill="#000000">场馆：</text>
        <text id="svg_4" xml:space="preserve" text-anchor="start" font-family="宋体" font-size="16" y="205.63779" x="70" stroke-width="0" fill="#000000">票价：</text>
        <text id="svg_5" xml:space="preserve" text-anchor="start" font-family="宋体" font-size="12" y="266.63779" x="36" stroke-width="0" fill="#000000">地址：</text>
        <text x="124" y="204" id="ticketPrice" name="ticketPrice" fill="#000000" stroke-width="0" font-size="16" font-family="宋体" text-anchor="start" xml:space="preserve">1388.00</text>
        <text x="490.08118" y="228.38779" name="ticketPrice" fill="#000000" stroke-width="0" font-size="16" font-family="宋体" text-anchor="start" xml:space="preserve" id="svg_8">1388.00</text>
        <text x="124" y="174" id="shopName" name="shopName" fill="#000000" stroke-width="0" font-size="14" font-family="宋体" text-anchor="start" xml:space="preserve">艺海剧院</text>
        <text x="488.39368" y="173.63779" name="shopName" fill="#000000" stroke-width="0" font-size="16" font-family="宋体" text-anchor="start" xml:space="preserve" id="svg_9">艺海剧院</text>
        <text x="124" y="144" id="showTime" name="showTime" fill="#000000" stroke-width="0" font-size="14" font-family="宋体" text-anchor="start" xml:space="preserve">2018-09-01 19:00:00</text>
        <text x="124" y="116" id="showName" name="showName" fill="#000000" stroke-width="0" font-size="14" font-family="宋体" text-anchor="start" xml:space="preserve">2018-09-01 周六 19:00</text>
        <image x="326" y="122" width="82" height="82" id="QrCode_CheckTicket" name="QrCode_CheckTicket" xlink:href="http://p0.meituan.net/myvideodistribute/f2b623c1cf76971ec51ca53f249eada288845.jpg"/>
        <text x="339" y="227" id="fetchCode" name="fetchCode" fill="#000000" stroke-width="0" font-size="12" font-family="宋体" text-anchor="start" xml:space="preserve">123456789</text>
        <text x="456.19836" y="113.63779" name="showName" fill="#000000" stroke-width="0" font-size="12" font-family="宋体" text-anchor="start" xml:space="preserve" id="svg_10">2018-09-01 周六 19:00</text>
        <text x="73" y="266" id="shopAddress" name="shopAddress" fill="#000000" stroke-width="0" font-size="11" font-family="宋体" text-anchor="start" xml:space="preserve">江宁路466号</text>
        </g>
    </svg>
</body>
</html>

本项目引用的自定义外部资源

svg.min.js