title: SVG clipPath - clipped area offset and size problem
body: <p>Please see the yellow rectangle, this is exactly the same as the rectangle clipping the image.
  However image is clipped smaller and moved right.</p>
  
  <p>The image is just one element, but imagine few more elements which all need to be clipped to a shape of a yellow rectangle.</p>
  
  <p>I know I can fix this by wrapping the <code>&lt;image&gt;</code> element (and any more elements) inside a <code>&lt;g&gt;</code> element and applying the clipPath to this <code>&lt;g&gt;</code> element.</p>
  
  <p>Is it possible to fix this issue by modifying just the clipPath part, without touching the rest of the svg structure? </p>
  
  <pre><code>&lt;defs&gt;
      &lt;clipPath id="clipPath"&gt;
          &lt;path d="M150-750 L150,750 L-150,750 L-150,-750Z" transform="matrix(1,0,0,1,152.5,770.5)"&gt;&lt;/path&gt;
      &lt;/clipPath&gt;
  &lt;/defs&gt;
  
  &lt;path fill="#ffff00" d="M150-750 L150,750 L-150,750 L-150,-750Z" transform="matrix(1,0,0,1,152.5,770.5)"&gt;&lt;/path&gt;
  
  &lt;image x="-1632" y="-1224" width="3264" height="2448" preserveAspectRatio="none"
         xlink:href="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg"
         transform="matrix(0.3529,0,0,0.3529,246.2554,998.5607)"
         style="clip-path: url(#clipPath);"&gt;&lt;/image&gt;
  </code></pre>
  
  <p>Please see the <a href="https://jsfiddle.net/3fL8soej/" rel="nofollow noreferrer">jsfiddle here</a>.</p>