Question

我在我的HTML中使用svg标签。我希望文本始终显示，即使顶部位于svg边界之外。请检查此处的jsfiddle，而不是文本的截断方式。如何让它出现？

<div class="chart">
    <svg height="300" width="300">
        <text y='10' x="96">Blah Blah</text>
    </svg>
</div>  

text {
   font-family: Arial;
   font-size: 20px;
   font-weight: bold;
   fill: #000;
   text-align: center;
   color: #000;
}

.chart {
   box-sizing: border-box;
   height: 98%;
   width: 100%;
   margin-top: 9rem;
 }

Answer 1

尝试此代码DEMO

<html>
<div id="thumbs-icon">  
                <svg id="icon-thumb">
                <g>
                    <rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="0" y="0" >    </rect>
                    <rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="10" y="0" ></rect>
                    <rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="0" y="7" ></rect>
                    <rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="10" y="7" ></rect>
                </g>
            </svg>
            <section id="text-thumb">Thumbs</section>
        </div>
</html>


#thumbs-icon {
    width: 15%;
    overflow: hidden;
    margin: 0 auto;
    cursor: pointer;
}   

#thumbs-icon:hover g rect {
    fill: rgb(255, 51, 153);
}

#thumbs-icon:hover {
    color: rgb(255, 51, 153);
}

#icon-thumb {
    width: 20px;
    height: 15px;
    margin-top: 1.5em;
    opacity: 1; 
    float: left;
}

#text-thumb {
    width: 40%;
    float: left;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px;
    margin-top: 1em;
}

测试被svg边界切断

1 个答案: