单个SVG中的多个宽高比

Question

我正在寻找一种使用SVG创建响应式图像的方法，其中某些部分在重新调整大小时会保持其宽高比，而其他部分则会失真。例如，这支铅笔可以调整大小，使两端保持相同的形状，只有身体被拉伸，如下图所示：

我可以使用CSS3的border-image-slice在HTML5中完成此操作，例如

    border-image-source: url("cropped-pencil_clipart.svg");
    border-image-slice: 25% 50% 25% 25% fill;

有关示例，请参阅this codepen。但是，我无法想出一种在100％外部SVG文件中实现它的方法，我可以将其用作图像或对象。实际上，我希望外部和中间元素具有preserveAspectRatio =＆＃34; none＆＃34;并且左边和右边的元素有=＆＃34; ...切片＆＃34;。我知道这在传统的＆＃34;中是不可能的。 SVG 1.1和我不想使用JavaScript或ForeignObject，因为这会限制我使用外部文件的方式。

是否有任何聪明的解决方法可以有选择地保留图像各个部分的宽高比？如果需要，我可以将源元素重新创建为纯粹的路径。我尝试过使用模式甚至是自定义标记但到目前为止还没有成功。欢迎大家提出意见。