如何程序化获取SVG尺寸？需忽略SVG中的port元素

Great question—this is a common scenario when working with component-based SVGs where ports (like connection points) sit outside the core component bounds, but you want the SVG's dimensions to reflect only the main component content. Here are a few practical, actionable approaches to solve this:

1. Dynamic Adjustment in the Browser (JavaScript) #

If you’re rendering the SVG in a web page, you can use JavaScript to calculate the tight bounding box of all non-port elements, then update the SVG’s viewBox and dimensions accordingly.

First, ensure your port elements have a consistent identifier (like a class port). Then use this code:

// Grab the target SVG element
const svg = document.querySelector('svg');

// Select all elements that are NOT ports (adjust selector to match your port setup)
const nonPortElements = svg.querySelectorAll(':not(.port)');

// Create a temporary group to compute combined bounds of non-port content
const tempGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
nonPortElements.forEach(el => tempGroup.appendChild(el.cloneNode(true)));
svg.appendChild(tempGroup);

// Get the smallest bounding box containing all non-port elements
const bbox = tempGroup.getBBox();

// Clean up the temporary group
svg.removeChild(tempGroup);

// Update the SVG to focus only on the non-port content
svg.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);

// Optional: Match explicit width/height to the new bounds (round for clean values)
svg.setAttribute('width', `${Math.round(bbox.width)}`);
svg.setAttribute('height', `${Math.round(bbox.height)}`);

Notes: #

• Adjust the :not(.port) selector to match your actual port identifiers (e.g., [data-type="port"] if using a data attribute instead of a class).
• getBBox() ensures you get the minimal possible bounds, completely ignoring any ports that stick outside the main component.

2. Preprocessing Static SVGs (Script/Batch Tool) #

If you need to adjust SVGs before deploying them, use a script to batch-process files. Here’s a Python example using the svgpathtools library:

First, install the library:

pip install svgpathtools

Then run this script:

from svgpathtools import svg2paths2, wsvg

def adjust_svg_dimensions(input_svg, output_svg):
    # Load SVG content
    paths, attributes, svg_attrs = svg2paths2(input_svg)
    
    # Filter out port paths (adjust condition to match your port attributes)
    non_port_data = [(path, attr) for path, attr in zip(paths, attributes) if attr.get('class') != 'port']
    non_port_paths = [item[0] for item in non_port_data]
    non_port_attrs = [item[1] for item in non_port_data]
    
    if not non_port_paths:
        print("No non-port elements found!")
        return
    
    # Calculate combined bounding box
    bboxes = [path.bbox() for path in non_port_paths]
    min_x = min(bbox[0] for bbox in bboxes)
    min_y = min(bbox[1] for bbox in bboxes)
    max_x = max(bbox[2] for bbox in bboxes)
    max_y = max(bbox[3] for bbox in bboxes)
    
    width = max_x - min_x
    height = max_y - min_y
    
    # Update SVG attributes to exclude port bounds
    svg_attrs['viewBox'] = f"{min_x:.2f} {min_y:.2f} {width:.2f} {height:.2f}"
    svg_attrs['width'] = f"{width:.2f}"
    svg_attrs['height'] = f"{height:.2f}"
    
    # Save the adjusted SVG
    wsvg(non_port_paths, attributes=non_port_attrs, svg_attributes=svg_attrs, filename=output_svg)

# Example usage
adjust_svg_dimensions("input.svg", "output.svg")

3. Manual Adjustment in Vector Editors #

If you prefer a visual workflow, use tools like Inkscape or Adobe Illustrator:

1. Select all port elements and hide them (Inkscape: Ctrl+H, Illustrator: Cmd/Ctrl+3).
2. Resize the canvas to fit the remaining content:
   • Inkscape: File > Document Properties > Resize page to content
   • Illustrator: Object > Artboards > Fit to Selected Art
3. Unhide the ports—they’ll stay in the SVG but won’t affect the canvas dimensions.

All these methods ensure your SVG’s declared dimensions and viewBox only account for the core component, completely ignoring any port elements that extend outside.

内容的提问来源于stack exchange，提问作者Marek Krzeminski