Question

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

所以，让我们说数据点读数为20％，我希望心脏用另一种颜色（例如颜色：＃DA1C5C）填充高达20％，剩下的就是原始颜色。我正在使用的代码是使用直图标字体而不是图片svg，但它尚未托管。

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

Answer 1

使用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);

Answer 2

你可以，这里有两种方法，你的例子是宽度为20％：

方法1：HTML图片

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;
}

结果将是可缩放的硬编码图像。您可以在此处查看 Fiddle 。

如果您想使用CSS进行更多控制，可以改用：

方法2：CSS背景图片

HTML：

CSS，基于this helpful answer：

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;
}

以下是 fiddle 的实际操作。

width以及上下padding是根据您要使用的图片的宽度：高度比计算的。在小提琴的例子中，我使用的是135px宽，155px高的。为了获得这个比例，我使用了这个：

(155/135)*100 = 114.814

这意味着高度是宽度值的114％。因此，如果width = 20%，则身高为(20 * 114814)/100或23%。在我的情况下，我通过将它同样应用为顶部和底部padding将其分为2（因为监视器不能显示半个像素，我将其四舍五入）。

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

是否可以将图标填充到百分比？

2 个答案: