Question

在我缩放（转换）容器后，有没有办法在<svg>标记内重新采样光栅图片本身在<svg class="photo" style="top: 425px; left: 1406px;"> <image width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../images/someimg.jpg"></image> </svg>容器内？我有一个640x640px的jpeg。它在页面上看起来像这样（它是地图上的一个弹出窗口，在悬停时会放大）。

.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);
}

的CSS：

<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);
 }

之前我尝试过css缩放：

<image>

效果很好：变换后d3.transition()内部看起来很清晰，但是当被打断时，悬停本身看起来很丑陋。所以我尝试用$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)'); });

来做

<image>

现在有一种奇怪的效果。当我第一次在页面重新加载后悬停时没有过渡，但svg会缩放，而{{1}}看起来很尖锐。但是在连续的过渡中，我看到了动画，但只有当它很小时，图像才是锐利的。当它缩放2.5倍时，它看起来就像是从刻度（1）拉伸的图像。任何灯棚都会非常感激。感谢。

在缩放svg容器之后，在svg <img/>标记中重新采样jpeg

0 个答案: