Question

PROJECT

我在项目中使用<use ...></use>包含一个SVG，如下所示：

<use xlink:href="myMap.svg#status-map"></use>

在浏览器中检查时，会产生：

<svg id="status-map" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1247.244px" height="907.087px" viewBox="64.094 122.25 985.889 657.072" enable-background="new 0 0 1247.244 907.087" xml:space="preserve">
  <g id="road">...</g>
  <g id="river">...</g>
  <g id="station">...</g>
  etc etc etc
</svg>

问题

我需要做的是对内部<g></g>元素进行分组，以便代码变为：

<svg id="status-map" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1247.244px" height="907.087px" viewBox="64.094 122.25 985.889 657.072" enable-background="new 0 0 1247.244 907.087" xml:space="preserve">
  <g id="container"> // <-- new container
    <g id="road">...</g>
    <g id="river">...</g>
    <g id="station">...</g>
    etc etc etc
  </g>
</svg>

我尝试使用innerHTML解压缩并将其包装但是SVG文件/代码失败了。

还试过

我也尝试过将<use>放在<g>元素中，但这也不起作用。

我需要这样做的原因是我使用SVGPAN来放大和缩小，并拖动...这需要包裹内部<g>元素在外部

有没有这样做？

Answer 1

你可以用JS操作svg的DOM：

$sql = "SELECT id, name, address, telephone_number, email, model, serial_no, status, date_booked FROM jobs";
$result = $dbconfig->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "
                        <tr>
                            <td>"; echo $row["id"]."</td>
                            <td>"; echo  $row["name"]. "</td>
                            <td>"; echo  $row["address"]. "</td>
                            <td>"; echo  $row["telephone_number"]. "</td>
                            <td>"; echo  $row["email"]. "</td>
                            <td>"; echo  $row["model"]. "</td>
                            <td>"; echo  $row["serial_no"]. "</td>
                            <td>"; echo  $row["status"]. "</td>
                            <td>"; echo  $row["date_booked"]. "</td>
                            <td><button type='button' class='btn btn-default btn-circle'><i class='fa fa-file-text'></i></a></td>
                        </tr>
                    ";
    }
} else {
    echo "0 results";
}
$dbconfig->close();
?>

Plunk

请参阅How do I manipulate the SVG DOM and create elements?

SVG使用 - 添加到组

1 个答案: