SVG clip-path Attribute

Ignition Early Access
1

Has anyone been able to successfully use the clip-path attribute on embedded SVGs in Perspective?

In most cases I have been able to approximate what I needed by using a path with its “fill-rule” attribute set to “evenodd” while having the “d” attribute double back over the sections that I needed to clip, but this is proving difficult when trying to clip paths with curves in them.

Take the following SVG as an example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 20 20">
	<defs>
		<clipPath id="rectClipPath">
			<rect x="0" y="5" width="20" height="15"/>
		</clipPath>
	</defs>
	<g clip-path="url(#rectClipPath)">
		<circle cx="10" cy="10" r="10" fill-rule="evenodd" fill="rgb(0,0,0)"/>
	</g>
</svg>

It displays correctly in a web browser, where the rectangle clip-path only allows the lower 3/4s of the circle to be shown:
image

But when the same SVG is embedded in a view in Perspective, it seems to drop the clip-path information entirely:

image
image578×522 27.5 KB

Am I configuring this incorrectly or is the clip-path attribute not able to be used within Perspective? If it’s the latter, it would be pretty helpful to get a list of Perspective-friendly SVG attributes.

1 Like
2

As a workaround, you can use an image component and the data syntax (not recommended if you have any bulky SVGs, but should be fine for smaller ones):
image
Just prefix the SVG source with data:image/svg+xml;utf8,

3 Likes
3

Thanks Paul,

That’s an interesting solution that might come in handy in the future! Unfortunately, the given example is purely for context. I’m using SVGs to create scalable custom components and the one I’m looking to use the clip-path attribute on has a fair amount of bindings on other attributes, so that workaround may not be the best in this case.

4

When you drop your svg, are you getting a warning from Perspective.SvgImporter in the gateway logs?

5

I don’t get any SVG related warnings in the gateway logs.

6

Hi
Any success on that?

7

I stopped pursuing this after this thread fizzled out. I’m using a dumb workaround of creating a “mask” layer in my svg at the top layer of the z-order of elements that is just an inverse outline of my shape with a fill color that is the same as my background to give the appearance of a clip path.

If you figure out a way to actually use the clip path attribute, please update us here; that would certainly come in handy!

1 Like