Javascript 如何在svg中设置精确的宽度

如果将鼠标悬停在矩形上，边框大小将超过矩形大小。我知道，因为父节点宽度是

100

，所以显示矩形边框

如果我将父节点宽度设置为

40

，它工作正常，但我需要相同的行为，而不更改父节点的

width

和

stroke width

我怎样才能做到这一点

//在鼠标悬停中，我设置了样式：
变量链接=$（“#ch”）；
links.hover（函数（）{
$（'ch'）.attr（'class'，'st'）；
}，函数（）{//mouseout
$（'ch'）.attr（'class'，''）；
});
.st{
笔划宽度：60px；
笔画：红色；
}
防止svg溢出的是您的UA样式（在chrome上）中的
svg:not（：root）{overflow:hidden}

因此，如果将其设置为“可见”

，它将工作：

svg:not（：root）{溢出：可见；}

---

你是说这样吗？改变填充颜色会更简单

其他方法是创建clipPath或使用ClipCSS属性

//在鼠标悬停中，我设置了样式：
变量链接=$（“#ch”）；
links.hover（函数（）{
$（'ch'）.attr（'class'，'st'）；
}，函数（）{//mouseout
$（'ch'）.attr（'class'，''）；
});
.st{
笔划宽度：60px；
笔画：红色；
}

找到了答案

<svg width="100" height="100">
    <defs>
        <clipPath id="clipRect">
            <rect width="40" height="40" />
        </clipPath>
    </defs>
    <rect id ='ch' width="40" height="40" clip-path=url(#clipRect)   style="fill:rgb(0,0,255)" stroke-width="8px" stroke="red" />
</svg>



这是不对的。。默认情况下，svg矩形行为是，如果我们将笔划设置为100，但实际矩形宽度设置为50，则矩形宽度的大小不会增加，并且在矩形内设置边框，但不清楚您想要什么。将外部svg元素包装在内部svg元素宽度/高度40中是否可行？