Jquery 如何绘制响应形状

背景故事/背景： 我正在做一个儿童活动，在这个活动中，孩子会听到一个声音，并决定用什么颜色来画一个卡特彼勒身体的一部分。 这必须是响应性的。我只使用HTML、CSS和Javascript。Bootstrap正在处理我的响应端，我正在使用%或vmin/vmax中的度量值。。。 我需要能够解决身体的每个部分分别，所以我可以根据用户的选择颜色

到目前为止： 我试着使用一个里面有20个div的div，每个div代表一个部分，每个部分都有一个图像，我试着用CSS绘制它们；我也尝试了第一种方法，只有一个div和里面的所有东西

问题： 当我调整窗口大小时，所有的解决方案都失败了。我试着把位置当作绝对的，当作相对的

因此：我需要定位多达20个圆圈，CSS或SVG（最好是），每个圆圈都可以通过用户交互自行解决（单击以更改颜色），并且在调整窗口大小时保持其形状

下面是我想用html重新创建的卡特彼勒的图片：

任何提示、指导或指导都会有所帮助。或者如果你对如何解决这个问题有其他看法

---

干杯

有几种方法可以使您的卡特彼勒敏感。您可以使用svg、多元素/伪元素、框阴影

下面是一个使用多个和此处描述的appraoch的示例：将第二个示例与视口相关单元一起使用：

div{
宽度：20vmin；高度：20vmin；
边界半径：50%；
背景：金；
保证金：0自动；
盒影：-10vmin 1vmin 0.2vmin蓝，
-18vmin.5vmin.01Vmin粉红色，
-25vmin.8vmin 0.5vmin西红柿，
-37vmin 1vmin 0.2vmin绿色，
-50vmin 1vmin 0.5vmin teal，
-63vmin 1vmin 0.2vmin水溶液；
}

---

您使用图像和绝对定位的方法可以工作，但请使用

left

属性的百分比值：

---

由于您想要为圆形着色，我们可以使用边界半径为50%的DIV元素。您可以将所有内容保留为百分比，甚至可以通过以下方式模拟圆的边界宽度：

var圆=[
{
左:5,，
前五名，
半径：5
},
{
左：7.5，
前7名，
半径：8
},
{
左：11.5，
前10名，
半径：8
},
{
左：14.5，
排名：14，
半径：9
}
];
变量wormBox=$（'.worm'）；
$。每个（圆、函数（i、数据）{
变量圆=$（''）；
circle.css({
“宽度”：数据半径+“%”，
“填充底部”：data.radius+“%”，
“左”：数据。左+“%”，
“顶部”：数据。顶部+“%”
});
圆。附属物（蜗牛）；
});
$（'.color'）。在（'click'，函数（e）上{
//随机测试颜色
var randomColor='#'+Math.floor（Math.random（）*16777215）.toString（16）；
$（this.css）({
“背景色”：随机颜色
});
});
.worm{
位置：相对位置；
垫底：50%；
边框：1px实心#000；
}
.圆圈{
位置：绝对位置；
显示：块；
边框：1px实心#000；
边界半径：50%；
背景：无#000人；
}
.颜色{
位置：绝对位置；
最高：3%；
右：3%；
底部：3%；
左：3%；
宽度：94%；
背景：无#fff；
边界半径：50%；
}

调整窗口大小时会发生什么？您能展示一下您的尝试吗？对于这个特定的图像，解决方案可能很简单。问题是：你还想画其他图片吗？谢谢@webtiki添加我的图片！法布里齐奥·卡尔德兰-对不起，我没有保留以前尝试的任何图像。我会尝试一些东西，测试一下，然后继续。。。我能告诉你的是，圆圈（或png）会变换位置。想象一下，我有这样的东西：d0000X（X是头，d是尾），我可能会得到：D00x0。。。或者x在其他元素上等等。。。斯科巴利奇-我只想画出那个形象。但是，该图像不能是单个png。。。我需要进入身体的不同部分。非常优雅的解决方案，尽管我很肯定会有问题IE@MarioA谢谢。关于IE，方块阴影得到IE9及以上的支持。我打算发布方块阴影一：哦，无论如何都很好+1） 我最终使用了svg！盒子阴影看起来很酷，但我不知道如何单独处理每个“阴影”！我需要能够点击和改变每一个！非常感谢！谢谢WebTiki和MarioA。我将在今天和明天尝试这两种方法，并接受其中一种。也谢谢你提醒我另一个帖子！Mario A能否请您详细说明一下，除了vmin或vmax之外，为什么对我的左值使用百分比？再次感谢！酷！我喜欢制作动画的想法。我没有计划，但也许我可以做它来调整位置，因此每次用户进入该页面时，caterpillar都会略有不同！干杯，伙计！我想那样做，但今天没有时间。。也许明天吧。干杯
<div class="catterpillar">
    <img src="http://images.clipartpanda.com/circle-clip-art-yToeE5KLc.png" class="cirlce c1" />
    <img src="http://images.clipartpanda.com/circle-clip-art-yToeE5KLc.png" class="cirlce c2" />
</div>

.catterpillar {
    width: 50%; // use a percantage for the width of the catterpillar
    position:relative;
}

.cirlce {
    position:absolute;
}

.c1 {
    width:5%; // use percentage for width and left
    left: 0%;
    top: 0;
}

.c2 {
    width:8%; 
    left: 3%;
    top: 5px;
}