修复了部分 svg 标签名或属性名大小写不正确时不生效的问题 #351

jin-yufeng · Oct 2, 2021 · c68a5d1 · c68a5d1
1 parent 4bc7715
commit c68a5d1
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 15 deletions.
diff --git a/src/miniprogram/parser.js b/src/miniprogram/parser.js
@@ -51,6 +51,15 @@ const config = {
     small: 'display:inline;font-size:0.8em',
     strike: 'text-decoration:line-through',
     u: 'text-decoration:underline'
+  },
+
+  // svg 大小写对照表
+  svgDict: {
+    animatetransform: 'animateTransform',
+    viewbox: 'viewBox',
+    attributename: 'attributeName',
+    repeatcount: 'repeatCount',
+    repeatdur: 'repeatDur'
   }
 }
 const tagSelector = {}
@@ -550,22 +559,21 @@ Parser.prototype.popNode = function () {
       this.xml--
       return
     }
-    let src = ''; const style = attrs.style
+    let src = ''
+    const style = attrs.style
     attrs.style = ''
-    if (attrs.viewbox) {
-      attrs.viewBox = attrs.viewbox
-    }
     attrs.xmlns = 'http://www.w3.org/2000/svg';
     (function traversal (node) {
       if (node.type === 'text') {
         src += node.text
         return
       }
-      src += '<' + node.name
+      const name = config.svgDict[node.name] || node.name
+      src += '<' + name
       for (const item in node.attrs) {
         const val = node.attrs[item]
         if (val) {
-          src += ` ${item}="${val}"`
+          src += ` ${config.svgDict[item] || item}="${val}"`
         }
       }
       if (!node.children) {
@@ -575,7 +583,7 @@ Parser.prototype.popNode = function () {
         for (let i = 0; i < node.children.length; i++) {
           traversal(node.children[i])
         }
-        src += '</' + node.name + '>'
+        src += '</' + name + '>'
       }
     })(node)
     node.name = 'img'

diff --git a/src/uni-app/components/mp-html/parser.js b/src/uni-app/components/mp-html/parser.js
@@ -53,6 +53,15 @@ const config = {
     strike: 'text-decoration:line-through',
     u: 'text-decoration:underline'
     // #endif
+  },
+
+  // svg 大小写对照表
+  svgDict: {
+    animatetransform: 'animateTransform',
+    viewbox: 'viewBox',
+    attributename: 'attributeName',
+    repeatcount: 'repeatCount',
+    repeatdur: 'repeatDur'
   }
 }
 const tagSelector = {}
@@ -589,23 +598,39 @@ Parser.prototype.popNode = function () {
       this.xml--
       return
     }
+    // #ifdef APP-PLUS-NVUE
+    (function traversal (node) {
+      if (node.name) {
+        // 调整 svg 的大小写
+        node.name = config.svgDict[node.name] || node.name
+        for (const item in node.attrs) {
+          if (config.svgDict[item]) {
+            node.attrs[config.svgDict[item]] = node.attrs[item]
+            node.attrs[item] = undefined
+          }
+        }
+        for (let i = 0; i < node.children.length; i++) {
+          traversal(node.children[i])
+        }
+      }
+    })(node)
+    // #endif
     // #ifndef APP-PLUS-NVUE
-    let src = ''; const style = attrs.style
+    let src = ''
+    const style = attrs.style
     attrs.style = ''
     attrs.xmlns = 'http://www.w3.org/2000/svg';
     (function traversal (node) {
       if (node.type === 'text') {
         src += node.text
         return
       }
-      src += '<' + node.name
-      for (let item in node.attrs) {
+      const name = config.svgDict[node.name] || node.name
+      src += '<' + name
+      for (const item in node.attrs) {
         const val = node.attrs[item]
         if (val) {
-          if (item === 'viewbox') {
-            item = 'viewBox'
-          }
-          src += ` ${item}="${val}"`
+          src += ` ${config.svgDict[item] || item}="${val}"`
         }
       }
       if (!node.children) {
@@ -615,7 +640,7 @@ Parser.prototype.popNode = function () {
         for (let i = 0; i < node.children.length; i++) {
           traversal(node.children[i])
         }
-        src += '</' + node.name + '>'
+        src += '</' + name + '>'
       }
     })(node)
     node.name = 'img'