SVG Path Highlighter

A library to highlight SVG paths based on user interactions, making them interactive.

Table of Contents

• Usage
• Configuration
• API
• Examples
• Development
• License

Usage

JavaScript

First, import the library and initialize it with a container and configuration:

// index.js
import SVGPathHighlighter from "svg-path-highlighter";
import config from "./path/to/config.json";

const container = document.getElementById("svg-container");
const highlighter = new SVGPathHighlighter(container, config);

highlighter.init();

HTML

Ensure you have a container in your HTML to hold the SVG:

<!-- index.html -->
<div id="svg-container"></div>

Using Built-in Configurations

You can also use the built-in configurations for human body front and back views. Use the loadConfig method to load these configurations:

import SVGPathHighlighter from "svg-path-highlighter";
import { loadConfig } from "svg-path-highlighter/configLoader";

const container = document.getElementById("svg-container");

loadConfig("HumanBodyFront").then(config => {
	const highlighter = new SVGPathHighlighter(container, config);
});

Available configurations:

• HumanBodyFront
• HumanBodyBack

Grouping SVG Paths

You can pass a third option in the constructor for grouping the SVG paths (optional). When hovered, the parts in the array will be hovered and selected together.

Example group object:

const groupConfig = {
	group1: ["part1", "part2", "part3"],
};

const highlighter = new SVGPathHighlighter(container, config, groupConfig);

Configuration

The configuration object should follow the SVGHighlighterConfig interface:

interface SVGHighlighterConfig {
	image: {
		id: string;
		width: number;
		height: number;
		href: string;
		transform: string;
	};
	paths: Array<{
		id: string;
		path: string;
	}>;
}

Example Configuration

{
	"image": {
		"id": "body-front",
		"width": 100,
		"height": 200,
		"href": "data:image/png;base64,front",
		"transform": ""
	},
	"paths": [
		{ "id": "front-part1", "path": "M10 10 H 90 V 90 H 10 Z" },
		{ "id": "front-part2", "path": "M20 20 H 80 V 80 H 20 Z" }
	]
}

API

Methods

• getConfig(): Returns the current configuration.
• getSelectedPaths(): Returns an array of selected path IDs.
• setSelectedPaths(paths: string[]): Sets the selected paths by their IDs.
• validateGroupConfig(): Validates the group configuration.
• destroy(): Cleans up and removes event listeners.

Example

const highlighter = new SVGPathHighlighter(container, config);

// Get the current configuration
const currentConfig = highlighter.getConfig();

// Get selected paths
const selectedPaths = highlighter.getSelectedPaths();

// Set selected paths
highlighter.setSelectedPaths(["front-part1", "front-part2"]);

// Validate group configuration
highlighter.validateGroupConfig();

// Destroy the highlighter
highlighter.destroy();

Examples

Vue.js Example

You can find a complete example using Vue.js in the examples/vue directory.

Project Setup

cd examples/vue
npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Development

Running Tests

To run the tests, use the following command:

npm test

Building the Project

To build the project, use the following command:

npm run build

License

This project is licensed under the MIT License. See the LICENSE file for details.