css - Crop and scale an image in SVG -


I have a SVG element in my HTML that contains two external files, another SVG and a bitmap.

  & lt; Svg xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" width = "1024" height = "768" & gt; & Lt; Image xlink: href = "bitmap.png" /> & Lt; Image xlink: href = "outline.svg" /> & Lt; / Svg & gt;  

My purpose is that I can swap any other (any size) bitmap and get a bitmap:

  1. Scale the width down (
  2. Close the bottom part of the bitmap

I have interpreted the bitmap image using the view box on the clippath, sub-SVG elements, And I can not nail the problem. I try to do it without javascript

Any thoughts?

< P> attribute:

  & lt; svg xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http: // www .w3.org / 1999 / xlink "width =" 200 "height =" 45 "> Image ID =" IMG "x =" 0 "y =" 0 "width =" 100% "height =" 100% "xlink: href =" http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png "preserveAspectRatio =" xMinYMin piece "/> & lt; / svg & gt;  

Bella


Comments

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

How to access user directory in lazarus? -

java - Gradle dependencies: compile project by relative path -