SVG文本消失在較大的標籤上

我正在使用Morris.js製作圖表。 Morris.js使用SVG繪製圖形。我在這裏設置了一個JSbin：JSbin example SVG文本消失在較大的標籤上

Morris.js使用Raphael繪製svg圖。問題在於X軸上的標籤。當標籤尺寸太大時，它們會消失。我用div元素的大小來修飾標籤的圖形和字體大小，但由於標籤是爲各種用戶動態生成的，因此我無法確定固定值。理想的解決方案是將文本包裝起來。可以採取什麼措施來應對這種情況？ Morris.js使用以下代碼片段創建text svg元素。

this.raphael.text(xPos, yPos, text).attr('font-size', '11').attr('font-family', 'calibri').attr('fill', this.options.gridTextColor);

來源

2013-10-24 Varun Jain

不知道這是否是一種解決方案，但您始終可以只應用一個應用於動態變量的nameofplace.substr（0,14）類型解決方案。 – Ian

看來raphael通過在文本中放置「\ n」來支持多行字符串。這對您來說可能是一個便宜的解決方案，系統地將標籤中的「\ n」替換爲「\ n」。

其他（更棘手）的解決辦法是更換外國元素拉斐爾產生的「文本」在SVG元素，允許自動換行：

<foreignObject x="20" y="10" width="150" height="200"> 
    <p xmlns="http://www.w3.org/1999/xhtml">Wrapping text using some foreignObject in SVG!</p> 
</foreignObject>

，或者如果你需要一個備用：

<switch> 
    <foreignObject x="160" y="10" width="150" height="200"><p xmlns="http://www.w3.org/1999/xhtml">Wrapping text using some foreignObject in SVG!</p></foreignObject> 
    <text x="20" y="20">Your SVG viewer cannot display html.</text> 
</switch>

我不知道用外來對象替換「文本」的最佳方式：在Morris渲染之後或通過黑客Morris/Raphael進行替換。

來源

2013-11-01 17:33:04

謝謝你的超級把戲！我在一年前閱讀過SVG規範，但不知何故錯過了這個標籤定義！不幸的是，莫里斯庫，計算標籤的寬度，並決定繪製或不繪製奇怪的標籤。因此，在渲染之後，我們沒有機會通過替換部分html/svg標籤來「修復」它。但無論如何，

真棒！ –

我認爲問題的定義需要進一步澄清，

我你到底有沒有發送的代碼工作正常，我也有複製相同的JSFIDDLE，它也工作正常..

我認爲標籤問題是自動完成的，因爲我已經測試了默認尺寸，當您查看CSS時會保留385px的寬度，如果看上去相同，則會保留518px，在這兩種情況下，渲染標籤都是不同的，實際上標籤超過了某些寬度未呈現。所以設置樣式和覆蓋沒有意義。

我認爲事情是建立在圖書館。所以它還有很長的路要走，或者改變圖書館。

讓我知道這將是方便的方式，我會幫你相應:)

編輯：但是，你可以改變GridTextSize的性質：這是16默認

Fiddle2這裏我已經更新

'gridTextSize：8'，顯示在大小爲8

不完美的所有文本，但會做:)

來源

2013-10-29 07:10:27 MarmiK

更改字體大小不起作用。您設置的示例在我的屏幕上缺少「北美」和「南美」。我認爲這需要更換圖書館。 –

是庫更改是必需的，但是如果頁面寬度更大，則此功能有效。這是一個庫中的自動計算，它的作用就像'min width = Bar的總寬度/ no。如果測試大小>最小寬度（不渲染文本節點）' – MarmiK

從there下載沒有最小化morris.js。在zip-archive中，您可以找到一個文件morris.js。在編輯模式下打開它並更改默認標籤角度參數的值（133行）：

133 |  xLabelAngle: 90,//original value 0

現在，如果你真的需要它最小化，你可以通過任何在線JS壓縮文件壓縮工具。

來源

2013-11-04 02:56:59

SVG文本消失在較大的標籤上

回答

相關問題