是否有可能填充一个图标的百分比

Is it possible to fill an icon to a percentage?

本文关键字：一个 图标 百分比 有可能 填充 是否      更新时间：2023-09-26

我想知道是否有一种方法可以将特定的图标或精灵填充到指定的百分比-即20%或类似的东西。我试图创建一个响应形状或图像，将作为流体图表，各种。我知道下面不是一个很好的例子——svg也是字体形式的。我想在我的代码中动态填充此图像到指定的%。

假设一个数据点读数为20%，我想让心脏填充另一种颜色(例如颜色:#DA1C5C)至20%，其余部分保持原始颜色。我正在使用的代码是使用一个直接的图标字体，而不是图像svg，但它还没有托管。

<div class="icon">
<i class="icon-doubleheart">
    <img src="https://s3.amazonaws.com/yourcareassets/doubleheart.svg">
</i>

使用SVG: fiddle

HTML: 

<div class="icon">
    <div id='blackIcon' class="icon-doubleheart">
        <img src="https://s3.amazonaws.com/yourcareassets/doubleheart.svg"/>
    </div>
    <div id='holdci'>
        <div id='colorIcon' class="icon-doubleheart">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
            <g>
                <path class='newColor' d="M353.1,137c-37.2-17.2-85.9-1-103.1,36.1c-17.2-37.1-65.9-53.3-103.1-36.1c-27.5,12.7-45,39.2-42.7,72.8h0.2   c1.4,14.1,6.1,29.4,15.2,45.5c22.2,39.4,61.6,69.1,130.3,122.3c68.7-53.2,108.1-82.9,130.3-122.3c9.1-16,13.8-31.3,15.2-45.5h0.2   C398,176.2,380.5,149.7,353.1,137z"/>
                <path class='newColor' d="M493.5,124c-11.1-34.6-36.2-62.5-70.5-78.6c-18.8-8.8-40-13.4-61.4-13.4c-45.8,0-87.4,20.7-111.6,54.2   c-24.2-33.5-65.8-54.3-111.6-54.3c-21.3,0-42.6,4.6-61.4,13.4c-34.4,16-59.4,44-70.6,78.6C0,144.3-3.9,173.4,6,209.7h0.7   c4.3,14.9,10.8,31,20.4,48.2c36.1,64.4,99.1,113.5,203.5,194.8l19.4,15.1l19.5-15.2C373.9,371.4,436.9,322.3,472.9,258   c9.7-17.2,16.2-33.3,20.4-48.2h0.7C503.9,173.4,500,144.3,493.5,124z M468.8,207.2h-0.7c-4,12.6-9.6,25.5-16.9,38.6   c-33.6,60-95.1,107.9-197,187.3l-4.2,3.3l-4.1-3.2C144,353.7,82.4,305.8,48.8,245.8c-7.3-13-13-25.9-16.9-38.5h-0.7   c-8-26.8-8.4-52.4-1-75.5c9-28,29.4-50.6,57.4-63.7c15.6-7.3,33.2-11.1,50.9-11.1c44.3,0,83.7,23.2,100.3,59.1l11.3,24.5l11.3-24.5   C277.9,80.2,317.2,57,361.6,57c17.7,0,35.3,3.8,50.9,11.1c28,13.1,48.4,35.7,57.3,63.6C477.2,154.8,476.8,180.4,468.8,207.2z"/>
        </g>
        </svg>
        </div>
    </div>
</div>
CSS: 

.icon {
    width: 10em;
    height: 10em;
}
#blackIcon {
    width: 100%;
    height: 100%;
}
#holdci {
    margin-top: -100%;
    overflow: hidden;
    width: 0;
    height: 99%;
}
#colorIcon {
    width: 10em;
    height: 10em;
}
.newColor {
    fill: #DA1C5C;
}

JS: 

var fill = 0;
var update = setInterval(function() {
    fill += 1;
    if (fill <= 100) {
        $('#holdci').css('width', (fill+'%')); 
    } else {
        clearInterval(update);        
    }
}, 100);

使用纯CSS:HTML: 

<div id='Icon'>
    <div id='IconText'>f</div>
    <div id='fillIcon'></div>
</div>
CSS: 

#Icon {
    position: absolute;
    width: 2em;
    height: 2em;
    border: 0.125em solid blue;
    border-radius: 0.2em;
}
#fillIcon {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 0;
    margin-top: 100%;
    background-color: blue;
}
#IconText {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    line-height: 150%;
    text-align: center;
    color: #cccccc;
    font-weight: bold;
    font-family: consolas;
    font-size: 1.5em;
}

JS: 

var fill = 0;
var update = setInterval(function() {
    fill += 1;
    $('#fillIcon').css('height', (fill+'%')); 
    $('#fillIcon').css('margin-top', ((100 - fill)+'%')); 
    if (fill === 100) {
        clearInterval(update);        
    }
}, 100);

带图片:fiddle

HTML: 

<div id='Icon'>
    <div id='IconText'><img style='width: 100%; height: 100%;' src='http://bellybusting.com.au/wp-content/uploads/2014/03/fb.jpg'/></div>
    <div id='fillIcon'><img style='width: 2em; height: 2em;' src='http://getdesign.org/wp-content/uploads/2013/08/Facebook-icon-with-green-background-56.png'/></div>
</div>
CSS: 

    #Icon {
    position: absolute;
    width: 2em;
    height: 2em;
}
#fillIcon {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 0%;
    margin-top: 0;
    overflow: hidden;
}
#IconText {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    line-height: 150%;
    text-align: center;
    color: #cccccc;
    font-weight: bold;
    font-family: consolas;
    font-size: 1.5em;
}

JS: 

var fill = 0;
var update = setInterval(function() {
    fill += 1;
    $('#fillIcon').css('height', (fill+'%')); 
    //$('#fillIcon').css('margin-top', ((100 - fill)+'%')); 
    if (fill === 100) {
        clearInterval(update);        
    }
}, 100);

你可以，这里有两个方法为你的例子20%的宽度:

方法1:HTML image HTML: 

<div>
    <img src="myImage.jpg" width="135" height="155" class="responsiveImage">
</div>

和CSS:

div { 
    max-width:100%;
    width:20%;
}
img.responsiveImage {
    width:100%;
    max-width:100%;
    height:auto /* only necessary to override the 'Height' attribute if imcluded */
    margin:0 auto;
}

结果将是一个可缩放的硬编码图像。你可以在这里查看提琴

如果你想使用CSS来获得更多的控制，你可以用这个代替:

方法二:CSS背景图片 HTML:

和CSS，基于这个有用的答案:

div.responsiveImage {
    width:20%;
    padding:12% 0; /* The 20:24 ratio of width to combined padding matches the dimensions of the image */
    background: url(myImage.jpg) no-repeat top left;
    background-position:50% 50%;  /* Sets reference point to scale from */
    background-size:cover; 
    border:solid 1px red;
}

下面是它的提琴的实际效果。

width和顶部和底部的padding是由你想要使用的图像的宽度:高度的比例计算的。在小提琴的例子中，我使用了一个135px宽，155px高的。为了获得这个比率，我使用如下命令:

(155/135)*100 = 114.814

这意味着高度是宽度值的114%。因此，如果是width = 20%，则高度为(20 * 114814)/100或23%。在我的例子中，我通过将其作为顶部和底部padding(由于显示器不能显示半像素，我将其四舍五入)将其分成2个。

请记住，一旦有了包装器，图像的height的填充值就会改变。此外，如果添加了任何内容，容器的整体高度也会发生变化。

相关文章：