在JavaScript形状内放置文本？

我想知道如果有人能帮助我。我想在我的网站上使用下面的JS小提琴，但我想在心形内添加一些文字，有没有办法做到这一点？在JavaScript形状内放置文本？

https://jsfiddle.net/kimmobrunfeldt/dnLLgm5o/

HTML：

<div id="container"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"> 
        <path fill-opacity="0" stroke-width="1" stroke="#bbb" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/> 
        <path id="heart-path" fill-opacity="0" stroke-width="3" stroke="#ED6A5A" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/> 
       </svg> 
</div>

的Javascript：

// [email protected] version is used 
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/ 

var bar = new ProgressBar.Path('#heart-path', { 
    easing: 'easeInOut', 
    duration: 1400 
}); 

bar.set(0); 
bar.animate(1.0); // Number from 0.0 to 1.0

CSS：

#container { 
    margin: 20px; 
    width: 200px; 
    height: 200px; 
}

来源

2017-03-26 Beefo

可以使用SVG的文本，像这样

<text x="32" y="50" fill="red">Love</text>

Fiddle

x & y是文本位置

来源

2017-03-26 18:06:58 slashsharp

谢谢。有没有办法自动居中没有X和Y？ – Beefo

https://jsfiddle.net/dnLLgm5o/1740/ – slashsharp

令人惊叹的，谢谢！ – Beefo

添加您的文本SVG下，设置的位置，以绝对的，设置Ť他将父母的位置改为亲戚，并修正了文字的位置。见JS小提琴：https://jsfiddle.net/dnLLgm5o/1738/

CSS：

#container { 
    position: relative; 
    margin: 20px; 
    width: 200px; 
    height: 200px; 
} 

#text { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 50px; 
    left: 0; 
    text-align:center; 
}

HTML：

<div id="container"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"> 
        <path fill-opacity="0" stroke-width="1" stroke="#bbb" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/> 
        <path id="heart-path" fill-opacity="0" stroke-width="3" stroke="#ED6A5A" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/> 
    </svg> 
    <p id="text">Loading...</p> 
</div>

来源

2017-03-26 18:05:26 Fefux

在JavaScript形状内放置文本？

回答

相关问题