SVG在放大/缩小时缩放背景跳跃

Question

我想为所有视图正确显示搜索图标 - 使用缩放/不缩放和普通视图。 当人们缩放例如110％时会出现问题。图标跳跃。

小提琴：Fiddle（尝试缩放/缩小 - 你会注意到跳跃）

HTML

<div id="outer">
  <div id="block"></div>
</div>

CSS

#outer
{
    background-color: #c0c0c0;
}

#block
{
    background-repeat: no-repeat;
    background-image: url(http://g3.acdn.lt/img/svg/icons_ptrn.svg);
    background-position: 0px 3.1%;
    width: 26px;
    height: 26px;
    display: block;
    background-repeat: no-repeat;
    padding: 0px;
    margin: 0 auto;
}

尝试：

• 有无背景位置
• 用像素设置背景位置
• 按照此处建议的百分比设置背景位置：background-size with background-position doesn't scale the position?