CamanJS in SVG?

Question

I'm looking to do some client-side image manipulation using CamanJS (http://camanjs.com/guides/) or some other tool like it on an image within an <svg> element.

Sample code is like this...

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="624" height="793" id="svg_3162" style="width: 639px;">
    <desc>Created with Rapha�l</desc>
    <defs></defs>
    <rect x="15" y="150" width="24" height="24" r="0" rx="0" ry="0" fill="#ff0000" stroke="none"></rect>
    <rect x="7" y="174" width="24" height="24" r="0" rx="0" ry="0" fill="#000000" stroke="none"></rect>
    MORE SVG STUFF
    <image x="35" y="0" width="600" height="769" preserveAspectRatio="none" xlink:href="https://s3.amazonaws.com/path/to/image.jpg"></image>
    MORE SVG STUFF
</svg>

It's getting to the <image> tag in the <svg> tag that seems to be the issue. Does anyone know if CamanJS can work with this? Or if there's something similar out there that can work in this scenario?

Answer 1

use foreignObject and set height, width, x, and y positions as well

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="624" height="793" id="svg_3162" style="width: 639px;">
<desc>Created with Rapha�l</desc>
<defs></defs>
<rect x="15" y="150" width="24" height="24" r="0" rx="0" ry="0" fill="#ff0000" stroke="none"></rect>
<rect x="7" y="174" width="24" height="24" r="0" rx="0" ry="0" fill="#000000" stroke="none"></rect>
MORE SVG STUFF

MORE SVG STUFF