mozilla以奇怪的方式渲染svg

Question

我在mozilla中绘制svg时遇到问题。它在Chrome和Microsoft Edge中看起来很好。您可以在不同的浏览器中看到渲染的差异： difference between chrome and mozilla

以下是来源：

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function drawArc(x, y, radius, startAngle, endAngle){
  var start = polarToCartesian(x, y, radius, endAngle),
      end = polarToCartesian(x, y, radius, startAngle),
      arcSweep = endAngle - startAngle <= 180 ? "0" : "1",
      d = [
        "M", start.x, start.y,
        "A", radius, radius, 0, arcSweep, 0, end.x, end.y
      ].join(" ");
  return d;
}

function textArc(x, y, radius, startAngle, endAngle, clockwise) {
  var start = polarToCartesian(x, y, radius, startAngle),
      end = polarToCartesian(x, y, radius, endAngle),
      arcSweep = endAngle - startAngle <= 180 ? "0" : "1",
      d = [
        "M", start.x, start.y,
        "A", radius, radius, 0, arcSweep, 1, end.x, end.y
      ].join(" ");
  return d;
}

$(function() {
  var $svg = $('svg'),
      $defs = $('defs'),
      $path = $('svg > path'),
      $text_path = null,
      x = ($('svg').width() / 2.2),
      y = x,
      r = x,
      total = $path.length,
      degree_padding = 5,
      sector = (360 / total),
      active_index = 0;
  
  $.each($path, function(i, el) {
    var $p = $(el),
        start_stroke_angle = (i * sector),
        end_stroke_angle = ((start_stroke_angle - degree_padding) + sector),
        start_text_angle = (sector * i),
        end_text_angle =  (sector * (i + 1)),
        id = (i + 1),
        label = $p.attr('data-label');
    
    // Set id and draw path
    $p.attr('d', drawArc(x, y, r, start_stroke_angle, end_stroke_angle));
    
    // Set defs
    var def_path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    def_path.setAttributeNS(null, 'id', 'text-path-' + id);
    $(def_path).attr('d', textArc(x, y, (r + 20), start_text_angle, end_text_angle));
    $defs.append($(def_path));

    // Set out cyrcle
    var def_pa = document.createElementNS("http://www.w3.org/2000/svg", "path");
    def_pa.setAttributeNS(null, 'id', 'text-path-' + id);
    $(def_pa).attr('d', textArc(x, y, (r + 52), start_text_angle, end_text_angle));
    $svg.append($(def_pa));
    
    // Set <text>
    var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    
    // Set <textPath>
    var text_path = document.createElementNS("http://www.w3.org/2000/svg", "textPath");
    text_path.setAttributeNS(null, 'startOffset', '50%');
    text_path.setAttributeNS(null, "text-anchor", "middle");
    text_path.setAttributeNS(null, 'dominant-baseline', 'center');
    text_path.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#text-path-" + id);
    
    var data = document.createTextNode(label);
    
    text_path.appendChild(data);
    $svg.append($(text).append(text_path));
  });
  
  var $text = $('text');

});

//--------------------- loading animation -------------------------
var intro_animation = function(i, setIntervalid){
    var text = $('text');
    var path = $('svg > path');

    if(i == 5){
        path.eq(i - 1).attr('class', 'complete');
        clearInterval(setIntervalid);
        collectCyrcleElements();
    }else{
        path.eq(i).attr('class', 'active');
        text.eq(i).attr('class', 'active');

        if(i != 0){          
            path.eq(i - 1).attr('class', 'complete');
        }
    }

};

var wheelActivationFunc = function(){
    var count = 0;

    var setIntervalID = setInterval(function(){
        intro_animation(count, setIntervalID);
        count++;
    }, 400);
};
//===========================================================================

//----------- grab all elements of the cyrcle and attach events -------------
var collectCyrcleElements = function(){

    var elementsLinks = {
        WorldwideMarketEntry: "",
        DigitalMarketingServices: "",
        DatabaseServices: "", 
        B2BMarketingSales: "", 
        BusinessProcessEnablement: ""
    };

    var elementsDescriptions = {
        WorldwideMarketEntry: "Research, Entry Plan, Staffing & Payrolling, Project Management",
        DigitalMarketingServices: "Social Media Listening, PR Marketing, Reputation Management, Search Engine, Optimization, Web Design",
        DatabaseServices: "Analytics, Consolidation, Enrichment, Quality, Integration", 
        B2BMarketingSales: "Channel Marketing, Prospect Identification, Lead Generation, Opportunity Pipeline, Management, ROI Tracking", 
        BusinessProcessEnablement: "CRM Consultancy Services Salesforce.com, Oracle Marketing Cloud, G Suite"
    };

    var elements = $(".complete");
    var texts = $("text");

    elements.click(function(){
        var label = $(this).data("label");
        alert("You Click on " + label);
    });

    texts.click(function(){
        var child = $(this).children("textpath");
        alert("You Click on " + child.text());
    });

    elements.hover(function(){
        // mouse in
        $(this).attr('class', 'active').css( 'cursor', 'pointer' );
        var label = $(this).data("label");
        var modLabel = label.replace( /\s/g, "");
        var finalLabel = modLabel.split('&').join('');
        $(".innerText p").text(elementsDescriptions[finalLabel]).data('link', label);
    }, function(){
        // mouse out
        var HoverOutedObj = $(this);
        setTimeout(function(){
            HoverOutedObj.css( 'cursor', 'default' ).attr('class', 'complete');
        }, 500);
    });

    texts.hover(function(){
        // mouse in
        $(this).attr('class', 'active').css( 'cursor', 'pointer' );
        var child = $(this).children('textPath');
        var content = child.text();
        var modContent = content.replace( /\s/g, "");
        var finalContent = modContent.split('&').join('');
        $(".innerText p").text(elementsDescriptions[finalContent]).data('link', content);
        var bigDivH = $(".innerText").height();
        var smallDivH = $(".innerText p").height();
        //$("innerText").css("paddingTop", (bigDivH - smallDivH)/2 + "px")
    }, function(){
        // mouse out
        $(this).css( 'cursor', 'default' );
    });

    $(".innerText p").click(function(){
        alert("You Click on " + $(this).data("link"));
    });
};

.innerText {
  display: block;
  color: #606060;
  font-family: "Roboto", serif;
  font-size: 20px;
  width: 300px;
  height: 200px;
  margin: 172px 0 0 223px;
  text-align: center;
  line-height: 1.5;
  z-index: 20;
}
.innerText p{
  text-align: center !important;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #606060 !important;
}
.innerText p:hover{
    transition: 0.3s;
    cursor: pointer;
    color: #a0a0a0 !important;
}
svg {
  position: relative;
  top: 50%;
  left: 50%;
  height: 530px;
  width: 500px;
  padding: 55px;
  -webkit-transform: translate(-50%, 100%);
          transform: translate(-50%, 100%);
}
path {
  fill: none;
  stroke: #a0a0a0;
  stroke-width: 2px;
  -webkit-stroke-width: 2px;
  stroke-dasharray: 6;
  stroke-opacity: 0.25;
  stroke-linecap: butt;
  -webkit-transition: stroke 333ms ease-in-out, stroke-width 333ms ease-in-out, stroke-opacity 333ms ease-in-out;
  transition: stroke 333ms ease-in-out, stroke-width 333ms ease-in-out, stroke-opacity 333ms ease-in-out;
}
path.complete {
  stroke: #e2e2e2;
  stroke-width: 12px;
  stroke-dasharray: none;
  stroke-linecap: round;
  stroke-opacity: 1;
  transition: 0.4s;
  cursor: pointer;
}
path.active {
  stroke: #DC6060;
  stroke-width: 12px;
  stroke-dasharray: none;
  stroke-linecap: round;
  stroke-opacity: 1;
  transition: 0.4s;
}
text {
  fill:	#606060;
  opacity: 0.25;
  -webkit-transition: opacity 333ms ease-in-out;
  transition: opacity 333ms ease-in-out;
  font-size: 18px;
  -moz-tab-size: 4; /* Code for Firefox */
    -o-tab-size: 4; /* Code for Opera 10.6-12.1 */
    tab-size: 4;
}
text:hover{
  fill: #b1b1b1;
}
text.active {
  opacity: 1;
  transition: 0.4s;
}
#svg_arrow{
  font-size: 40px;
  color: #DC6060;
  text-align: center;
  margin-top: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="services_tab">
  <tr>
    <th id="services_tab_left_th">
      <div id="services_diagonal"></div>
      <h1>SERVICES</h1>
      <h2 style="text-align:right;">Sales Impact</h2>
      <h2 style="margin-left:160px;">B2B Marketing</h2>
      <h2 style="">Outsourcing Excellence</h2>
      <p>We provide targeted, quality and integrated marketing services to connect leading brands with their customers worldwide. As a pioneer in sales process automation, we believe in data-driven multichannel marketing that catalyses awareness, action and loyalty via traditional, digital, social and emerging channels.</p>
      <p>We focus on customer relationship, innovation and impact to deliver measurable results to our clients.</p>
      <p>We hold a record of successful B2B marketing implementation worldwide, because we are attuned to the needs of the global marketplace. Our team combines an array of talents and personal experiences and works beyond borders and time, in over 50 languages from 38 locations.</p>
    </th>
    <th style="text-align:center;">
      <svg width="530" height="530" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs></defs>
        <path data-label="Worldwide Market Entry"/>
        <path data-label="Digital Marketing Services"/>
        <path data-label="Database Services"/>
        <path data-label="B2B Marketing & Sales"/>
        <path data-label="Business Process Enablement "/>
      </svg>

      <a class="innerText">
        <p>What we can do.</p>
        <i class="fa fa-long-arrow-right" aria-hidden="true" id="svg_arrow"></i>
      </a>

    </th>
  </tr>
</table>

有什么想法吗？请帮忙:(