SVGEditor Test

SVG默认宽度值

输出面板高度值默认为200px。此外，SVGEditor使用了以下默认设置：

svg { display: block; width: 100vw; height: 100vh; }

因此，如果不为svg元素指定width及height属性值，则自动铺满整个输出面板。

改变默认宽高值

通过CSS设置宽高值

又分为两种情况。第一种情况，只设置值。

svg { border: 1px solid gray; width: 300px; height: 300px; }

这种情况不会改变输出面板的高度。如果svg的高度值超出输出面板的高度，输出面板将出现滚动条。

第二种情况，当希望改变输出面板的高度时，可为SVGEditor设置result-div-height属性值：

...

svg { border: 1px solid gray; width: 300px; height: 300px; }

设置SVG元素的内联宽高值

有时需要为svg指定内联的宽高值，从而无需额外的CSS设置。

此时，情况变为较为复杂，主要涉及到：

iframe与输出面板的高度如何相互适应
CSS属性值的继承与覆盖

为此，LiveEditor引入了新的钩子方法doAfterApplyHTMLFromTab，SVGEditor调用其以进行进一步的设置。

当有任一svg元素设置了内联的宽高值时，将取消原有的自动铺满整个输出面板的设置，但为每个svg保留了display: block;的设置。

doAfterApplyHTMLFromTab(doc) { let oneSvg = doc.querySelector('svg'); if (oneSvg.hasAttribute('width') || oneSvg.hasAttribute('height')) { let svgDefaultStyle = doc.head.querySelector('link[href*="svg-default-style.css"]'); svgDefaultStyle?.remove(); let svgs = doc.querySelectorAll('svg'); svgs.forEach(svg => { svg.style.display = 'block'; }); } }

则有以下效果：

svg { border: 1px solid gray; }

此时也可通过result-div-height进一步应用自动高度。

svg { border: 1px solid gray; }