Why does Inkscape transform my "use"d clip path?

Question

So among a bunch of problems that I've run into while trying to make a mouth, I've come across a workaround that kind of works. I make two paths: one "lip path" (the primary and clip path), and one mouth path (the background of the mouth). I also make a clipPath and use the lips as the path (which I need to reference through xlink:href?). I then apply the clipping to mouth path. I then have to close inkscape, Find+Replace svg:=>(empty), and then open Inkscape again to continue drawing.

My thought process is that I can use the lips to mould the mouth (for lack of a better word) and that way I can make many facial expressions with just one path. But Inkscape disagrees:

Stage	State
Start
Upon Moving
Desired Effect

What ends up happening is, upon modification, Inkscape applies a transform to my clipPath's use object, and I assume it's so I can clip an object and freely use the original object - but this defeats the purpose of my want to use use. This means that every time I modify the lips' location, I need to go to the XML Editor, and delete the transform attribute. Fortunately, I can edit the path's nodes and the Inkscape will respect that, which is the expected result.

Ideally, I just want to have one path for the lips, allowing me to clip the rest of the mouth in/out, so I can make many facial expressions with minimal effort. Of course, there'll be situations where I have to remake the mouth (such as when the tongue or teeth protrude from the mouth), but they're exceptions that I'm willing to deal with.

These are the few questions I have:

1. How do I fix this to achieve the result I've described?
2. Is there a way I can permanently fix this for future projects?
3. Why do I need to remove the namespacing from Inkscape's SVG code for this to work?
4. Why does Inkscape export the SVG tags namespaced to begin with?
5. Why do I need to use xlink:href instead of href when it's completely valid?
6. Why does Inkscape not offer the option to move away from deprecated features (such as xlink:href)? (source: MDN)

Answer 1

There is a setting in the preferences that seems to do what you want. Under 'Behavior → Clones' you can set 'Move original: clones and linked offsets' to 'Move in parallel' which will make Inkscape stop updating a clone's transforms when changing the original.

As for the namespacing issue, this happens when you use the XML-editor to add a node and don't prefix it with the svg: namespace when asked for the tagname (i.e. typing in use instead of svg:use in the node creation dialog). Inkscape thinks you want to add a generic non-SVG element to the document and has to prefix the rest.

The way namespacing works in XML is that you can have a default namespace which lets you omit the prefix everywhere. All SVG elements (use, clipPath, path, rect etc.) are actually in the 'SVG' namespace (http://www.w3.org/2000/svg). Inkscape uses the prefix svg:, but also declares it as the default namespace, so the tagnames and attributes aren't normally prefixed in the saved file. However, when you use the XML-editor and add a generic element without a namespace (which doesn't have meaning in SVG, which is why it doesn't/shouldn't work), 'SVG' can no longer be the default namespace, since you can't differentiate between unprefixed default tags and non-namespaced generic tags anymore. That means Inkscape has to remove the default namespace and add the svg: prefix to all other tags. When you then delete svg: with a text-editor everywhere, you trick Inkscape into thinking that it's the default namespace and you just forgot to declare it in the root element.

Inkscape is mostly based on SVG 1.1 and is slowly moving towards SVG 2.0 and the xlink-namespace is required in the former and only optional in the latter. As for it being always required by Inkscape, it is a known issue. If you ask me, the deprecation-notice on the MDN page is wrong and you should still prefer to use xlink:href for backwards compatibility. Even if you know that your target renderer understands SVG 2.0, it still has to recognize the xlink-version per the spec, so all you do by using href directly is saving just a few characters and a namespace declaration, at the risk of it not working at all in older/SVG 1.1-only software.

Answer 2

Draw the lips shape. Do Edit > Clone > Create clone, and drag the clone over the grouped mouth parts. Select both the Group and the Clone, then do Object > Clip > Set. The clone essentially becomes the clipping mask.

Now move the clone source on top of the clone.

To edit the clone source, select it using the Edit Paths by Nodes tool N. Then do Ctlr+A to select all the nodes of the shape and click and drag to move, or select individual nodes and move. Editing the lips clone source automatically updates the lips clone (which is now the clipping mask). Do the same to edit the parts inside the mouth group.

Example:

Here's the full Inkscape SVG if you want to examine its construction. Not sure how long this will stay up, so I've added the optimised SVG here too.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="255.6mm" height="155.9mm" version="1.1" viewBox="0 0 255.6 155.9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <clipPath id="clipPath32020">
   <use transform="translate(550.3 -164)" width="100%" height="100%" xlink:href="#path14080"/>
  </clipPath>
 </defs>
 <g transform="translate(389.6 -237.7)">
  <rect x="-389.6" y="237.7" width="255.6" height="155.9" ry="9.24" fill="#fff7ab" stop-color="#000000"/>
  <g transform="translate(195 -41.73)">
   <g transform="translate(-549.7 165.2)" clip-path="url(#clipPath32020)">
    <rect x="-24.36" y="114.2" width="236.5" height="187.3" ry="0" fill="#670b0b" stop-color="#000000"/>
    <g fill="#fff" stroke="#000" stroke-linecap="round" stroke-linejoin="round">
     <path d="m69.22 152.6c2e-6 9.047-5.134 12.6-14.28 16.38-7.289 3.012-14.28-7.334-14.28-16.38 2e-6 -9.047 6.394-16.38 14.28-16.38s14.28 7.334 14.28 16.38z" stop-color="#000000" stroke-width="3.65"/>
     <path d="m113.8 157.3c0 9.047 5.134 12.6 14.28 16.38 7.289 3.012 14.28-7.334 14.28-16.38 0-9.047-6.394-16.38-14.28-16.38-7.887 0-14.28 7.334-14.28 16.38z" stop-color="#000000" stroke-width="3.65"/>
     <rect x="68.04" y="140.3" width="23.1" height="34.44" ry="9.24" stop-color="#000000" stroke-width="3.65"/>
     <rect x="91.14" y="141.4" width="23.1" height="34.44" ry="9.24" stop-color="#000000" stroke-width="3.65"/>
    </g>
    <path d="m53.4 252.2c16.8-20.58 37.14-43.63 50.16-46.57 13.02-2.94 22.5 4.569 16.2 13.39-13.68 19.15-32.76 41.16-32.76 41.16z" fill="#db5069" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.65"/>
   </g>
   <path id="path14080" d="m-461.8 322.7c37.8-3.36 67.45-14.3 82.45 2.058 18.48 20.16 16.31 49.23-35.58 64.86-34.86 10.5-60.77 16.11-103.2-12.03-38.21-25.35-34.19-47.41-6.465-57.49 27.72-10.08 30.86-1.598 62.79 2.602z" fill="none" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.65"/>
  </g>
 </g>
</svg>

Sorry, but I can't really answer your other "why" questions. You'd likely need to ask the developers why they made certain decisions. These are not really within the scope of graphic design anyway. This is mere speculation on my part, but the xlink:href deprecation issue is probably because of backwards compatibility issues it would cause with previous versions of Inkscape.