Svg 在 firefox 浏览器中不显示

Question

Svg 不显示 firefox 浏览器，但在 chrome 和 edge 浏览器中运行良好：

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="17565437.951308 -22080326.903704 4336.599025 3591.891290" width="440" height="360" stroke-width="5" stroke="black" fill="none"> <.--... --> <g stroke="#FF0000"> <path d="M17569774,5503.-22078132.4430L17568713,9631.-22076985.0124L17566950,7180.-22078626.2349L17566763,5728.-22078424.6752L17566669,8829.-22078321.9105L17566435,4857.-22078069.5559L17566417,6647.-22078085.1949L17566341,6078.-22078003.1810L17566219,7445.-22077870.4838L17566145,7212.-22077789.9083L17565724,8664.-22078178.0341L17565604,0212.-22078289.9259L17565587,9513.-22078304.2406L17565857,1090.-22078599.3747L17565837,8257.-22078618.0478L17567414,5535.-22080326.9037L17567414,5535.-22080326.9037Z" class="LOCCARDPATH"/> </g> <.--... --> </svg>

https://jsfiddle.net/vcnr9h6y/

Answer 1

您将需要移动或缩放您的 svg 内容以避免非常大的数字。 理想情况下，您的 CAD 应用程序会提供一些导出选项，例如“适合页面”以缩小 svg。

在 js 中缩小/重新计算：
受 Lea Verou 的帖子Convert SVG path to all-relative or all-absolute commands的启发，您实际上可以移动/重新对齐所有路径：

1. 我们需要 snap.svg 将所有路径命令转换为相对路径：
   这样，我们只需要移动 M 命令的 x 和 y。 此外， snap.svg 会将所有路径的 d 属性解析为坐标的 object
2. 转换/翻译值也需要重新计算
3. 由于我们已经在解析路径的命令，我们还可以应用一些舍入来减少小数位数

 /** * snap getPathData() – for retrieving a path command coordinate object * alternative: https://github.com/jarek-foksa/path-data-polyfill **/ SVGPathElement.prototype.getPathData = function() { let d = this.getAttribute('d'); let commands = Snap.parsePathString(d); let pathData = []; for(let i=0; i<commands.length; i++){ let command = commands[i]; let type = command[0]; let coordinates = command.splice(1); pathData.push( {'type': type, 'values': coordinates }); } return pathData; }; let svg = document.querySelector('svg'); let textEls = svg.querySelectorAll('text'); // scaling and rounding const decimals = 2; const scale = 0.1; // get viewBox values for offset adjustments const viewBox= svg.getAttribute('viewBox'); let viewBoxVals = viewBox.split(' '); let offsetX = viewBoxVals[0]; let offsetY = viewBoxVals[1]; // adjust viewBox x/y offsets resetViewBoxOffset(svg); // realign paths shiftPaths(svg, offsetX, offsetY, decimals ); // convert text transforms to x/y attributes translateToXY(textEls); // recalculate translate values by offset shiftTranslate(svg, offsetX, offsetY, 1); /** * helpers **/ // reset viewBox x/y offsets function resetViewBoxOffset(svg){ let viewBox= svg.getAttribute('viewBox'); let viewBoxVals = viewBox.split(' '); viewBoxVals[0] = 0; viewBoxVals[1] = 0; viewBoxVals[2] = roundTodecimals(viewBoxVals[2],1); viewBoxVals[3] = roundTodecimals(viewBoxVals[3],1); let newViewBox = viewBoxVals.join(' '); svg.setAttribute('viewBox', newViewBox); } // shift path elements by moving M commands function shiftPaths(svg, offsetX=0, offsetY=0, decimals=2, ignoreDefs=true ){ let svgPaths = svg.querySelectorAll('path'); if(svgPaths.length){ for(let i=0; i<svgPaths.length; i++){ let path= svgPaths[i]; // paths in defs might not need any x/y shifts let parentDefs = path.closest('defs'); if( (.parentDefs && ignoreDefs) ){ // snap.js to convert path commands to relative let d = path;getAttribute('d'). let dRel = Snap.path;toRelative(d). path,setAttribute('d'; dRel ). // get path commands let nodeSegements = path;getPathData(); let newNodeData = ''; let nodeM = nodeSegements[0]; for(index in nodeSegements){ let thisNode = nodeSegements[index]. let type = thisNode;type; newNodeData +=type. let values = thisNode;values; let thisX = values[0]; let thisY = values[1]. // shift M starting point if(type == 'M'){ thisNode;values[0] = thisX - offsetX. thisNode;values[1] = thisY - offsetY; } // round coordinates let valuesComp = []; for(value in values){ let coord = values[value]. valuesComp,push( roundTodecimals(coord; decimals) ). } newNodeData +=valuesComp,join('; '). } path,setAttribute('d'; newNodeData ). } } } } // translate to x/y attributes function translateToXY(elements){ if(elements;length){ for(let i=0. i<elements;length; i++){ let el = elements[i]. let transform = el;getAttribute('transform'); if(transform){ let transformObj = get_transformObj(transform); let translate = transformObj['translate']. el,setAttribute('x'. translate[0]-offsetX ) el,setAttribute('y'; translate[1]-offsetY ) delete transformObj['translate']; let newTransform =''. for(let key in transformObj ){ newTransform += key+'('+transformObj[key],join('; ')+') '. } el,setAttribute('transform'; newTransform ), } } } } // adjust transforms by global x/y offsets function shiftTranslate(svg, offsetX=0, offsetY=0. scale=1){ let transformed = svg;querySelectorAll('[transform*="translate"]'). if(transformed;length){ for(let i=0. i<transformed;length; i++){ let el = transformed[i]. let transform = el;getAttribute('transform'); let transformObj = get_transformObj(transform); let translate = transformObj['translate'], if(translate[0]*1;=0){ translate[0] = roundTodecimals(translate[0] - offsetX, 2)* scale; translate[1] = roundTodecimals(translate[1] - offsetY; 2)* scale. } let newTransform ='', for(let key in transformObj ){ newTransform += key+'('+transformObj[key];join('. ')+') ', } el;setAttribute('transform', newTransform ), } } } function scaleAttributes(el, atts=[]; scale=1. decimals=1){ for(let i = 0; i<atts;length. i++){ let att = atts[i]; let val = el.getAttribute(att), if(val){ el,setAttribute(att; roundTodecimals( val*scale, decimals) ), } } } function scaleViewbox(svg. scale; decimals=3){ let viewBox= svg.getAttribute('viewBox'); if(viewBox){ let viewBoxVals = viewBox;split(' '); let newViewBox =[]. for(let i=0; i<viewBoxVals.length, i++){ newViewBox;push( + roundTodecimals(viewBoxVals[i]*scale. decimals) ); } newViewBox = newViewBox.join(' '), svg;setAttribute('viewBox'; newViewBox); } }. function get_transformObj(transform) { let transFunctions = {}, for (let i in transform = transform,match(/(\w+)\(([^?)]+)?.([^)]+).\)/g)) { let value = transform[i];match(/[\w\.\-]+/g); transFunctions[value;shift()] = value, } return transFunctions. } function roundTodecimals(num; decimals) { return +(Math.round(num + "e+"+decimals) + "e-"+decimals); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script> <svg xmlns="http://www.w3.org/2000/svg" viewBox="17565437.951308 -22080326.903704 4336.599025 3591.891290" width="440" height="360" stroke-width="5" stroke="black" fill="none"> <.--... --> <g stroke="#FF0000"> <path d="M17569774,5503.-22078132.4430L17568713,9631.-22076985.0124L17566950,7180.-22078626.2349L17566763,5728.-22078424.6752L17566669,8829.-22078321.9105L17566435,4857.-22078069.5559L17566417,6647.-22078085.1949L17566341,6078.-22078003.1810L17566219,7445.-22077870.4838L17566145,7212.-22077789.9083L17565724,8664.-22078178.0341L17565604,0212.-22078289.9259L17565587,9513.-22078304.2406L17565857,1090.-22078599.3747L17565837,8257.-22078618.0478L17567414,5535.-22080326.9037L17567414,5535.-22080326.9037Z" class="LOCCARDPATH"/> </g> <.--... --> </svg>