Dynamically set image as shape fill

[rafaelclaycon]

Hi! I'm building a seat map for our office and I would like to dynamically add the pictures of people inside an SVGShape.

I tried getting the shape node and overriding it with an SVGDataImage, but it did not work. The shape's fill just became transparent.

for i in stride(from: 0, to: subgroup.contents.count, by: 1) {
    if let id = subgroup.contents[i].id {
        if id.contains("photo_") {
            subgroup.contents[i] = SVGDataImage(data: Data(imageAsBase64.utf8))
        }
    }
}

I hope this is possible to do. Any tips? Thanks in advance!

[ystrot]

Hi @rafaelclaycon,

In general everything is fine, but you didn't configure your data image correctly. There are width and height which you need to set, otherwise it will be zero size by default.

[rafaelclaycon]

Thank you for your fast reply, @ystrot! Your answer helped a lot.

But, from my perspective at least, there seems to be a bug or improvement to be made here:

Even though I set a size for the Image, the picture itself in the SVG retains the size of the picture Data passed.

SVGDataImage(width: 30, height: 30, data: image.pngData())

What do you think? Is this working as expected?

[ystrot]

Yeah, if original size of your image is different from the size you provide, that might be an issue. Unfortunately there is no way to provide content mode for now. I recommend you to make a fork and use following customization:

• Add a parameter to SVGDataImage , something like:

@Published public var isScaled: Bool = false

• In SVGDataImageView check whether this parameter is set to true and apply scaling you need (like scaledToFit or scaledToFill)

I keep this issue open until we'll add support of the content mode on the SVG side.