Làm cách nào để giới hạn hoặc cắt đoạn văn bản trong SVG?

Tôi đã thực hiện một bảng trong SVG, và tôi muốn điền nó với dữ liệu động. Điều đó có nghĩa là tôi không biết văn bản mất bao nhiêu không gian và tôi muốn cắt hoặc ẩn văn bản trùng lặp. Làm thế nào tôi có thể làm điều đó trong SVG?Làm cách nào để giới hạn hoặc cắt đoạn văn bản trong SVG?

tài liệu HTML của tôi với SVG trông giống như:

<!DOCTYPE html> 
<html> 
<body> 
<svg> 
<text x="100" y="100">Orange</text>  <text x="160" y="100">12</text> 
<text x="100" y="115">Pear</text>  <text x="160" y="115">7</text> 
<text x="100" y="130">Banana</text>  <text x="160" y="130">9</text> 
<text x="100" y="145">Pomegranate</text><text x="160" y="145">2</text> 

<line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)"/> 
</svg> 
</body> 
</html>

Và điều này sẽ làm cho:

enter image description here

Có cách nào tôi có thể cắt chữ i SVG- tôi "bảng" ?

thực hiện giải pháp từ câu trả lời Erik của:

<!DOCTYPE html> 
<html> 
<body> 
<svg> 
    <text x="10" y="20" clip-path="url(#clip1)">Orange</text>  
    <text x="10" y="35" clip-path="url(#clip1)">Pear</text>  
    <text x="10" y="50" clip-path="url(#clip1)">Banana</text>  
    <text x="10" y="65" clip-path="url(#clip1)">Pomegranate</text> 

    <text x="70" y="20">12</text> 
    <text x="70" y="35">7</text> 
    <text x="70" y="50">9</text> 
    <text x="70" y="65">2</text> 

    <line x1="67" y1="5" x2="67" y2="75" style="stroke:rgb(100,100,100)"/> 

    <clipPath id="clip1"> 
     <rect x="5" y="5" width="57" height="90"/> 
    </clipPath> 
</svg> 
</body> 
</html>

enter image description here

Nguồn

2011-07-14 Jonas

bạn có thể thấy trong hình ở trên, clip ở giữa chữ cái 'a'. thích textPath thay vì http://stackoverflow.com/a/9249966/592792 –

Bạn có thể sử dụng clip-path để cắt thành bất kỳ hình dạng nào bạn muốn, xem ví dụ: masking-path-01 từ svg testsuite.

phần có liên quan, xác định con đường clip:

<clipPath id="clip1"> 
    <rect x="200" y="10" width="60" height="100"/> 
    ... you can have any shapes you want here ... 
</clipPath>

và sau đó áp dụng các con đường đoạn như thế này:

<g clip-path="url(#clip1)"> 
    ... your text elements here ... 
</g>

Nguồn

2011-07-14 11:00:19

có cách nào để thực hiện nội tuyến này không? Giống như có tất cả thông tin trực tiếp trong thuộc tính clip-path? – Matthias

@Matthias có thể sử dụng URI dữ liệu, nhưng điều đó sẽ khá xấu, và tôi không chắc chắn rằng nó được hỗ trợ trong tất cả các trình duyệt. Tuy nhiên, trong tương lai, có thể sử dụng một số hình dạng đơn giản trực tiếp trong thuộc tính 'clip-path', xem https://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html # the-clip-path. –

cảm ơn bạn đã trả lời. Tôi quan tâm đến cách tiếp cận dữ liệu xấu xí này, bạn có thể cho tôi một ví dụ không? – Matthias

-1

(1) Không có lý do để sử dụng SVG cho các bảng. Sử dụng bảng HTML.

(2) Bằng cách "cắt", tôi hiểu bạn có nghĩa là văn bản thừa sẽ bị che khuất. SVG sử dụng "mô hình của họa sĩ" theo đó các phần tử được chỉ định sau trong tài liệu được vẽ trên các phần tử được chỉ định trước đó. Điều này sẽ cho phép bạn cắt các vùng.

(3) Nếu bạn thực sự cần làm điều này trong tài liệu SVG, bạn có thể sử dụng đối tượng nước ngoài và nhúng HTML.

Nguồn

2011-07-14 10:26:10 Marcin

HTML chỉ là bản xem trước, tôi sẽ hiển thị SVG của mình trong ứng dụng Java Swing trên máy tính để bàn, vì vậy tôi không thể sử dụng HTML. – Jonas

Jonas, bạn có chắc chắn rằng Swing sẽ không hiển thị HTML được nhúng không? Trong mọi trường hợp, tôi tin rằng tôi đã trả lời câu hỏi của bạn về việc cắt. – Marcin

Swing có hỗ trợ rất hạn chế đối với HTML, ví dụ: không có góc tròn trên bàn. Tôi không thể nhận được 'externalObject' làm việc trong IE9. Tôi sẽ cố gắng nhiều hơn về việc cắt bớt các vùng, nhưng vì vậy không có may mắn. Bạn có mã ví dụ nào không? – Jonas

Như Marcin nói tại điểm (2) của câu trả lời của mình (không may downvoted nhưng thực sự đây là một điểm tốt) một cách khác để đạt được hiệu quả là để overpaint một phần không muốn với một hình chữ nhật màu trắng.

<!DOCTYPE html> 
<html> 
<body> 
<svg> 
<text x="100" y="100">Orange</text>  
<text x="100" y="115">Pear</text>  
<text x="100" y="130">Banana</text>  
<text x="100" y="145">Pomegranate</text> 

<!-- Overpaint the overflowing text --> 
<rect x="155" y="85" width="100" height="100" fill="white" /> 

<line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)"/> 

<text x="160" y="100">12</text> 
<text x="160" y="115">7</text> 
<text x="160" y="130">9</text> 
<text x="160" y="145">2</text> 

</svg> 
</body> 
</html>

svg overlay sample

Tham chiếu đến các đặc điểm kỹ SVG: SVG 2.0 Rendering Order

Nguồn

2014-08-31 10:58:02 Edward

Nếu bạn không muốn sử dụng một clip-path, mà có thể là một nỗi đau nếu mỗi phần tử có kích thước khác nhau, sau đó bạn có thể cũng sử dụng các phần tử lồng nhau <svg> để cắt. Chỉ cần đảm bảo các phần tử svg có kiểu CSS overflow:hidden.

<!DOCTYPE html> 
<html> 
<body> 
<svg> 
    <svg width="57" height="15" x="10" y="5"><text y="15">Orange</text></svg>  
    <svg width="57" height="15" x="10" y="20"><text y="15">Pear</text></svg> 
    <svg width="57" height="15" x="10" y="35"><text y="15">Banana</text></svg> 
    <svg width="57" height="15" x="10" y="50"><text y="15">Pomegranate</text></svg> 

    <text x="70" y="20">12</text> 
    <text x="70" y="35">7</text> 
    <text x="70" y="50">9</text> 
    <text x="70" y="65">2</text> 

    <line x1="67" y1="5" x2="67" y2="75" style="stroke:rgb(100,100,100)"/> 
</svg> 
</body> 
</html>

Nguồn

2016-03-18 16:57:54 drarmstr

Nếu vì một số lý do bạn không muốn sử dụng clipping, bạn cũng có thể sử dụng một thẻ SVG lồng nhau:

<svg> 
    <svg x="10" y"10" width"10" height="10"> 
    <text x="0" y="0">Your text</text> 
    </svg> 
</svg>

Bằng cách này, văn bản của bạn sẽ được cắt bỏ khi nó ngoài lồng nhau Chế độ xem SVG.Lưu ý rằng x và y của thẻ text tham chiếu đến hệ tọa độ của SVG lồng nhau và tương ứng với 10 trong hệ tọa độ của SVG bên ngoài.

Nguồn

2017-03-05 11:56:54

Làm cách nào để giới hạn hoặc cắt đoạn văn bản trong SVG?

Trả lời

Các vấn đề liên quan