带有描边的 SVG 图像正在裁剪

Question

我有简单的图像

<symbol id="cloud" viewBox="0 0 96 96">
    <path style="stroke:#356e94; 
stroke-width:2px;" d="M 44 12 C 29.707031 12 17.828125 21.632813 13.75 34.625 C 5.71875 38.5 0 46.507813 0 56 C 0 69.207031 10.789063 80 24 80 L 72 80 C 85.210938 80 96 69.207031 96 56 C 96 43.273438 85.921875 33 73.375 32.25 C 68.640625 20.480469 57.421875 12 44 12 Z M 44 20 C 54.945313 20 64.082031 27.296875 67 37.25 L 67.875 40.25 L 71.125 40.125 C 71.984375 40.070313 72.234375 40 72 40 C 80.886719 40 88 47.113281 88 56 C 88 64.882813 80.886719 72 72 72 L 24 72 C 15.113281 72 8 64.882813 8 56 C 8 49.164063 12.253906 43.441406 18.25 41.125 L 20.25 40.375 L 20.75 38.375 C 23.300781 27.871094 32.664063 20 44 20 Z M 44 33 L 33 48 L 40 48 L 40 64 L 48 64 L 48 48 L 55 48 Z "/>
</symbol>

但是当我使用中风:#356e94; 中风宽度:2px;我的html图像正在裁剪，如何避免这种情况？

Answer 1

您可以使用溢出属性(来自 CSS)。

<symbol id="cloud" viewBox="0 0 96 96" overflow="visible" style="overflow: visible;">
    <path style="stroke:#356e94; 
stroke-width:2px;" d="..."/>
</symbol>

由于不同浏览器的支持不同，我在元素中直接使用了-overflow属性，并且在样式中使用了overflow。

更新

示例:https://fiddle.jshell.net/zjsw0jtn/1/