html – div中的SVG笔画问题

概述我需要在div中绘制一个SVG并填充它.如果SVG设置了笔划,则将其绘制在div之外. 我看到宽度= 100％的svg没有考虑笔划宽度. .shape { border: 1px solid blue; width: 200px; height: 200px;}svg { overflow: hidden; // IE11 has 'visible' as default} 我需要在div中绘制一个SVG并填充它.如果SVG设置了笔划,则将其绘制在div之外.

我看到宽度= 100％的svg没有考虑笔划宽度.

.shape {  border: 1px solID blue;  wIDth: 200px;  height: 200px;}svg {  overflow: hIDden;  // IE11 has 'visible' as default}

<div >  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" wIDth="100%" height="100%" preserveAspectRatio="none" stroke="red" stroke-wIDth="20" vIEwBox="0,100,50">    <polygon points="0,50 100,50 50,0" />  </svg></div>

如何使SVG填充父级考虑到笔画宽度？

它应该是这样的：

这必须适用于任何SVG,三角形只是一个例子.

例如,在Chrome中打开浏览器开发工具,如果我将鼠标悬停在多边形上,则会在考虑笔划的情况下显示其边界框.我想知道这是否仅适用于网络浏览器,或者也可以通过代码实现.或者也许这不是正确的方向.

我尝试的另一件事是使用< img>并将SVG加载到其中.结果相同.

解决方法 看起来你只需要在这个例子中改变你的多边形点！

或者我在这里遗漏了什么？！

.shape {  border: 1px solID blue;  wIDth: 200px;  height: 200px;}svg {  overflow: hIDden;  // IE11 has 'visible' as default}

<div >  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" wIDth="100%" height="100%" preserveAspectRatio="none" stroke="red" stroke-wIDth="15" vIEwBox="0,50">    <polygon points="10,50 90,10" />  </svg></div>

总结

以上是内存溢出为你收集整理的html – div中的SVG笔画问题全部内容，希望文章能够帮你解决html – div中的SVG笔画问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。