从KityFomulator开发过程中的SVG小结(包括IE兼容性)

简述

本次的项目是一个公式编辑器.主要使用了Mathjax技术以及kityFomular插件.所谓的kityFomular插件其实本质上是自己封装的用svg绘制可编辑公式的一个第三方库.

本文将阐述SVG常见坑解决方案与一些css样式常见问题的解决方案(也许会更新).本文针对的IE版本为IE11(调试模式下显示edge浏览器)

IE下的SVG高度继承

在使用SVG的viewBox时.非IE浏览器可以不设置中间层级的高度而自动继承(方便阅读,使用内联样式)

<span class="general_char_view _input_text_item _input_item" style="display:inline-block; width: 49.8274px; height: 39.36px;">
	<div class="nb-formala-wrapper" style="display: block">
    	<div class="nb-formala-editor-panel _nb-formala-editor-panel">
         	<div class="kf-editor-edit-area">
         		<div class="kf-editor-canvas-container">
         			<svg id="kity_svg_0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" font-size="50" viewBox="5.456968088664825e-14 -19.68000030517578 49.827449798583984 39.36000061035156">
						<!-- ...SVG内部内容略 -->
					</svg>
        		</div>
        	</div>
        </div>
     </div>
</span>

可以看到,[svg]Dom是[._input_item]的第四代孙子级(非直接子级).
SVG在非IE浏览器中(chrome与safari等),会自动继承祖父级别高度.而在IE浏览器中,SVG只会显式继承直接父级的高度.
相似的问题解决方案可以参见 带有viewBox和width的SVG在IE中没有正确缩放高度.
为了解决这个问题,需要在中间层级全部加上height:100%的显示样式如下

<span class="general_char_view _input_text_item _input_item" style="display:inline-block; width: 49.8274px; height: 39.36px;">
	<div class="nb-formala-wrapper" style="display: block; height:100%">
    	<div class="nb-formala-editor-panel _nb-formala-editor-panel" style="height:100%">
         	<div class="kf-editor-edit-area" style="height:100%">
         		<div class="kf-editor-canvas-container" style="height:100%">
         			<svg id="kity_svg_0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" font-size="50" viewBox="5.456968088664825e-14 -19.68000030517578 49.827449798583984 39.36000061035156">
						<!-- ...SVG内部内容略 -->
					</svg>
        		</div>
        	</div>
        </div>
     </div>
</span>

SVG更改viewBox属性

1.问题表述:有的时候想要更改svg的viewBox属性,使用原生的dom.setAttribute(‘viewBox’, newAttr)方法,发现设置的值变成了小写的viewbox,即是没有办法设置成功,如下

<button id="changeSVG" onclick="clickHandler()">更改viewBox</button>
<div style="width: 300px; height: 200px;">
  <svg id="kity_svg_0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1" width="100%" height="100%" font-size="50">
    <!-- ...SVG内部内容 -->
    <rect width="300" height="200"
      style="fill:rgb(187, 255, 0);stroke-width:1;
      stroke:rgb(0,0,0)"/>
  </svg>
</div>
<script>
  function clickHandler(){
    var dom = document.getElementById('kity_svg_0');
    dom.setAttribute('viewBox', '0 0 200 100');
  }
</script>

解决方案:尝试使用setAttributeNS,用指定命名空间赋值

<button id="changeSVG" onclick="clickHandler()">更改viewBox</button>
<div style="width: 300px; height: 200px;">
  <svg id="kity_svg_0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1" width="100%" height="100%" font-size="50">
    <!-- ...SVG内部内容 -->
    <rect width="300" height="200"
      style="fill:rgb(187, 255, 0);stroke-width:1;
      stroke:rgb(0,0,0)"/>
  </svg>
</div>
<script>
  function clickHandler(){
    var dom = document.getElementById('kity_svg_0');
    svg.setAttributeNS('http://www.w3.org/2000/svg', 'viewBox', `0 0 200 100`);
  }
</script>

2.问题描述:在IE下会出现就算使用了setAttributeNS也无法设置值的情况.
解决方案:尝试将命名空间设置为null或者undefined

svg.setAttributeNS(null, 'viewBox', `0 0 200 100`);