amcharts.com中的下劃線製品導出爲SVG時的圖表標題

我想在導出amcharts.com圖表時強調圖表標題，但在正常查看圖表期間不會。 Amcharts.com支持建議在導出圖表時將內嵌樣式的下劃線添加到標題中。amcharts.com中的下劃線製品導出爲SVG時的圖表標題

代碼示例如下：https://codepen.io/bryanf/pen/jrNkwo。我已經修改（這裏：https://www.amcharts.com/demos/exporting-chart-to-image/）的amcharts.com基本出口爲例，包括由amcharts.com支持建議的「onPrint」功能：

function onPrint (e, info) { 
    var format = info.format, 
     mimeType = info.mimeType, 
     fileName = [info.fileName, info.extension].join("."), 
     chart = this.setup.chart, 
     chartExport = chart.AmExport, 
     $div = $(chart.div); 

    setTimeout(function() { 
    $div.find(".amcharts-title").attr("text-decoration", "underline"); 

    chartExport.capture(info, function() { 
     chartExport[["to", format].join("")](info, function (data) {  
     chartExport.download(data, mimeType, fileName);   
     }); 
    }); 
    }, 200); 
}

的onPrint功能被觸發的各種格式（PNG，JPG，和SVG）「菜單」對象中（也可用於「出口」對象設置的菜單選項都存在）：爲SVG導出時

"export": { 
    "enabled": true, 
    "menu": [{ 
    "class": "export-main", 
    "menu": [ { 
     "label": "Save Image", 
     "menu": [ { 
     "format": "PNG",   
     "click": onPrint 
     }, { 
     "format": "JPG",   
     "click": onPrint 
     }, { 
     "format": "SVG", 
     "click": onPrint   
     }]  
    }] 
    }] 
}

此作品爲PNG和JPG格式，但會造成一些問題。具體而言，圖表標題的下劃線延伸超過標題的末尾，並且在標題的中點附近出現一個刪除線（例如，通過「圖表」中的字母「Cha」上面的Codepen示例）。特別是，在Adobe Illustrator CS6中查看下載的SVG文件時出現這種情況，但在Inkscape中（在Windows 10桌面上）則不會。它似乎與瀏覽器無關（在Windows 10桌面上使用Firefox，Chrome，Opera和IE的結果相同）。

Amcharts.com支持無法複製該問題。任何建議或解決方法，將不勝感激。

來源

2016-08-31 bryman79

我可以在Firefox中看到它，但Chrome和IE11對我來說很好（Win 7）。

我認爲這可能實際上是Firefox正在做正確的事情，其他渲染器可能不會（請參閱此答案末尾的註釋）的情況。

，顯示標題SVG的部分看起來像這樣：

<g transform=" matrix(1 0 0 1 823 20) "> 
    <text font-family="Verdana" font-size="22" font-weight="bold" text-decoration="underline" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10;fill:#000000;fill-opacity:1; fill-rule: nonzero; opacity: 1" > 
     <tspan x="-63.72" y="10.48" fill="rgba(0,0,0,1)">Test Chart</tspan> 
    </text> 
</g>

注意有空格前後包含標題文本<tspan>後。

但是它的父<text>元素的樣式爲text-decoration="underline"。

這很重要的原因是因爲在文件頂部發生了什麼。根元素<svg>聲明：xml:space="preserve"。通過這樣做，它告訴渲染器，所有空白都是重要的，應該保留。所以<tspan>之前和之後的空間應該被渲染 - 包括它們的下劃線。

您得到刪除線效果的原因是因爲tspan之前的空格被加下劃線，然後tspan在顯示標題的其餘部分之前將文本位置向下並向左改變。

修復的方法是任一：

之前和之後<tspan>刪除該空格，或
變化被抑制的xml:space屬性default，這將導致空間。

TL;博士

有一個在圖表庫的SVG出口的錯誤。你應該可以報告它。

鉻

的xml:space屬性在即將到來的SVG2規範棄用。這可能是其不影響Chrome和/或其他某些瀏覽器的原因之一。特別是，Chrome已經開始實施一些SVG2功能。但我不知道是否刪除xml:space是其中之一。

來源

2016-08-31 06:42:11

感謝您的信息。您使用哪個應用程序查看保存的SVG文件？ – bryman79

Firefox，Chrome，IE –

我們發佈了導出插件的更新，它可以解決這個問題。感謝Paul提供的空白提示:) https://github.com/amcharts/export/ – Maertz

amcharts.com中的下劃線製品導出爲SVG時的圖表標題

回答

相關問題