如何在SAP UI5 apiVersion 2渲染器中处理SVG

核心转换方法 #

apiVersion 2的渲染器要求通过结构化API替代直接的HTML字符串写入，SVG元素的处理完全适配这套逻辑：

• SVG根元素：使用openStart("svg")初始化，通过attr()设置xmlns、width、height等属性，最后调用openEnd()完成标签打开
• 内部元素（如path、circle等）：同样遵循"初始化-设置属性/类-闭合"的流程，替代原有的write("<path ...>")写法：
  原代码示例：

  oRenderer.write("<path d='M12 2C6.48...' class='sapUiIcon'/>");
  

  转换后：

  oRenderer.openStart("path");
  oRenderer.attr("d", "M12 2C6.48..."); // 传入路径字符串
  oRenderer.class("sapUiIcon"); // 设置类名
  oRenderer.openEnd(true); // 自闭合标签，无需单独调用close
  

  若元素非自闭合（如<g>），则在内容渲染完成后调用close("g")闭合标签

完整SVG片段转换示例 #

原有代码：

oRenderer.write("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>");
oRenderer.write("<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z' class='sapUiIcon'/>");
oRenderer.write("</svg>");

apiVersion 2写法：

oRenderer.openStart("svg");
oRenderer.attr("xmlns", "http://www.w3.org/2000/svg");
oRenderer.attr("width", "24");
oRenderer.attr("height", "24");
oRenderer.openEnd();

oRenderer.openStart("path");
oRenderer.attr("d", "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z");
oRenderer.class("sapUiIcon");
oRenderer.openEnd(true);

oRenderer.close("svg");

相关文档资源 #

• SAP UI5官方SDK中sap.ui.core.Renderer类的API文档：详细说明了openStart、attr、class、close等方法的参数和适用场景，这些方法对SVG元素完全兼容
• UI5自定义控件开发指南的「渲染器升级」章节：明确了apiVersion 2渲染器的核心要求——所有DOM/SVG元素均通过结构化API构建，避免字符串拼接，保障渲染安全性和兼容性

内容的提问来源于stack exchange，提问作者Shameek Sharma