mozilla render svg странным образом

Question

У меня проблема с рисованием svg в mozilla. Он выглядит хорошо в 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: \t #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>

Любые идеи? Пожалуйста, помогите :(

Answer 1

По MDN, вы можете просто использовать маску для Firefox, как и в Firefox 3.5:

• https://developer.mozilla.org/en/CSS/mask

Однако, маска требует SVG изображение, чтобы действовать в качестве маски Вы можете использовать base-64 для кодирования вашего SVG-изображения в вашей таблице стилей или использовать файл изображения SVG.