16
Tôi đã mã nguồn SVG sau đó tạo ra một số hộp với các văn bản:SVG: Về sử dụng <defs> và <use> với văn bản biến giá trị
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
<defs>
</defs>
<title>Draw</title>
<g transform="translate(50,40)">
<rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" />
<text text-anchor="middle" x="40">Text</text>
</g>
<g transform="translate(150,40)">
<rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" />
<text text-anchor="middle" x="40">Text 2</text>
</g>
<g transform="translate(250,40)">
<rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" />
<text text-anchor="middle" x="40">Text 3</text>
</g>
</svg>
Như bạn thấy, tôi lặp đi lặp lại <g></g> ba lần để có được ba hộp như vậy, khi SVG có các phần tử <defs> và <use> cho phép sử dụng lại các phần tử bằng cách sử dụng tham chiếu id thay vì lặp lại định nghĩa của chúng. Một cái gì đó như:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
<defs>
<marker style="overflow:visible;fill:inherit;stroke:inherit"
id="Arrow1Mend" refX="0.0" refY="0.0" orient="auto">
<path transform="scale(0.4) rotate(180) translate(20,0)"
style="fill-rule:evenodd;stroke-width:2.0pt;marker-start:none;"
d="M 0.0,-15.0 L -20.5,0.0 L 0.0,15.0 "/>
</marker>
<line marker-end="url(#Arrow1Mend)" id="systemthread" x1="40" y1="10" x2="40" y2="410" style="stroke: black; stroke-dasharray: 5, 5; stroke-width: 1; "/>
</defs>
<title>Draw</title>
<use xlink:href="#systemthread" transform="translate(50,40)" />
<use xlink:href="#systemthread" transform="translate(150,40)" />
<use xlink:href="#systemthread" transform="translate(250,40)" />
</svg>
Đáng tiếc là tôi không thể làm điều này với mã SVG đầu tiên kể từ khi tôi cần các văn bản là khác nhau cho mỗi hộp, trong khi thẻ <use> chỉ đơn giản là bản sao 100% những gì đang được định nghĩa trong <defs>.
Có cách nào để sử dụng <defs> và <use> với một số loại cơ chế tham số/đối số như cuộc gọi chức năng?
tôi đặt một lớp trên