SVG Scheme

In the scheme definition, you can specify whether the target image is an SVG image.

By selecting SVG, within the Catalog it is possible to click on image markers.

By default, all text elements became clickable, and when clicked, the text is used to search by position and open the details of a Spare Part or a sub Model Part.

In case you need a more interactive schema, such as highlighting entire sections of the machine, you can redefine the JavaScript function responsible for making elements clickable on mouseover.
To do this you need to register the following filter in the custom filters components and redefine the transform method according to the desired result you want to achieve.

exports.svgProductSchemaTransformer = function() {

	function SVGProductSchemaTransformer() { }

	SVGProductSchemaTransformer.prototype.transform = function(svg, args) {
		svg.find("text").each(function() {
			let position = $(this).text();
			if (position && args.svgPositionMap && args.svgPositionMap[position]) {
				let objectByPosition = args.svgPositionMap[position];
				const options = { clickableObject: objectByPosition, clickableClass: args.clickableClass };
				appUtils.getCatalog().addSvgClickableElement(this, options);
			}
		});

	};
	return SVGProductSchemaTransformer;
}();

The above filter receive the SVG element that is used to find all text elements and transform them to clickable elements.
Depending on how the SVG is structured, you can redefine the schema transformer function to make whole parts of the schema clickable, and not just the number or position label.
When the "addSvgClickableElement" function is invoked, the element is enriched with the CSS class named "svg-clickable" which is responsible to change how the element is displayed when the mouse passes over it (e.g. stroke color).

svg text.svg-clickable:hover{
 stroke: var(--accent-color) !important;
 cursor: pointer;
 font-size: larger;
}

In the "options" parameter you can pass a custom CSS class to be added to the clickable element.

const options = {"technicalSchemePosition": $(this).text(), "clickableClass": "my-css-class", ...context};

You can edit your custom class into the Appearance / CSS page.