Javascript 在svg中对jpeg重新采样<；图像>；缩放svg容器后的标记

在缩放（变换）容器后，是否有任何方法可以对

标记内的光栅图片进行重采样，该标记本身位于

容器内？ 我有一个640x640px的jpeg。页面上看起来是这样的（它是地图上的一个弹出窗口，悬停时会放大）

夹住

<svg>
    <defs>
    <clipPath id="clipper">
        <polygon points="0,0 56,0 56,56 36,56 28,64 20,56 0,56 0,0"/>
    </clipPath>
  </defs>
</svg>

它工作得很好：内部的

在变换后看起来很锋利，但当被打断时，悬停本身看起来很难看。所以我试着用

d3.transition（）

现在有一种奇怪的效果。当我在重新加载页面后第一次悬停时，没有任何转换，但是svg会缩放，

看起来有点尖锐。但是在连续的变换中，我看到了动画，但是图像只有在很小的时候才清晰。当缩放2.5倍时，它看起来就像缩放（1）中的拉伸图像。 如有任何灯光照射，将不胜感激。

---

谢谢。

您可以获取源图像，在缩小的画布上绘制，从画布生成该图像的base64编码，然后将其放回图像中。相当辛苦。：）@多谢你的建议，听起来真像是把人送上了火星。到目前为止，我通过在svg容器上使用

溢出：可见
缩放
本身来解决这个问题
.photo {
    position: absolute;
    width: 54px;
    height: 54px;
    transform-origin: 50% 119%;
    box-shadow: 5px 5px 3px #999;
    overflow: visible;
    cursor: pointer;
}

.photo image {
    clip-path: url(#clipper);
} 

<svg>
    <defs>
    <clipPath id="clipper">
        <polygon points="0,0 56,0 56,56 36,56 28,64 20,56 0,56 0,0"/>
    </clipPath>
  </defs>
</svg>

 photo:hover {
     transform: scale(2.5);
 }

$photoSvg.on('mouseover', function() {
        d3.select(this).transition()
            .duration(400)
            .style('transform', 'scale(2.5)');
    })
    .on('mouseout', function() {
        d3.select(this).transition()
            .duration(400)
            .style('transform', 'scale(1)');
    });