0
我在mozilla中繪製svg有問題。它在Chrome和Microsoft Edge中看起來很好。你可以看到在不同的瀏覽器渲染的區別： difference between chrome and mozillamozilla以奇怪的方式渲染一個svg
這裏是源：
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>任何想法？請幫助:(
嘗試將overflow =「visible」（或overflow：visible）添加到剪裁的svg元素 – defghi1977
或更好的是，擴大視口，讓你n首先在外面畫。 –
適合我。謝謝:) –