html - Test getting cut off by svg boundary -
Using svg tags in my html, I want to always show text, even if the top SVG is out of range. Please check here and not how to cut off the text. How do I reveal it?
& lt; Div class = "chart" & gt; & Lt; Svg height = "300" width = "300" & gt; & Lt; Text y = '10 'x = "96" & gt; Blah blah & lt; / Text & gt; & Lt; / Svg & gt; & Lt; / Div & gt; Text {font-family: aerial; Font-size: 20px; font-weight: bold; Fill: # 000; Text align: center; Color: # 000; }. Chart {box-size: border-box; Height: 98%; Width: 100%; Margin Top: 9rem; }
Try this code
Lt; Html & gt; & Lt; Div id = "thumb-mark" & gt; & Lt; Svg id = "icon-thumb" & gt; & Lt; Ch & gt; & Lt; Rect class = "rect" width = "8" height = "5" fill = "RGB (102,102,102)" x = "0" y = "0" & gt; & Lt; / Rect & gt; & Lt; Rect class = "rect" width = "8" height = "5" fill = "RGB (102,102,102)" x = "10" y = "0" & gt; & Lt; / Rect & gt; & Lt; Rect class = "rect" width = "8" height = "5" fill = "RGB (102,102,102)" x = "0" y = "7" & gt; & Lt; / Rect & gt; & Lt; Rect class = "rect" width = "8" height = "5" fill = "RGB (102102102)" x = "10" y = "7" & gt; & Lt; / Rect & gt; & Lt; / G> & Lt; / Svg & gt; & Lt; Section id = "text-thumb" & gt; Thumbs & lt; / Section & gt; & Lt; / Div & gt; & Lt; / Html & gt; # Thumb-icon {width: 15%; Hidden flurry; Margin: 0 auto; Cursor: indicator; } # Thumb-mark: hover g rink {fill: RGB (255, 51, 153); } # Thumb-icon: hover {color: RGB (255, 51, 153); } # Icon-thumb {width: 20px; Height: 15px; Margin-Top: 1.5 AM; Opacity: 1; Swim left; } #text-thumb {width: 40%; Swim left; Font-family: helvetica, ariel, non-serif; Font-size: 20px; Margin-Top: 1 AM; }
Comments
Post a Comment