如何绘制响应形状[关闭]

Question

背景故事/背景： 我正在做一个儿童活动，孩子会听到声音并决定用什么颜色来画毛虫身体的一部分。 这必须是响应式的。我只使用 HTML、CSS 和 Javascript。 Bootstrap 正在照顾我的响应方面，我正在使用 %'s 或 vmin/vmax 中的度量... 我需要能够分别处理身体的每个部分，以便我可以根据用户的选择对其进行着色！

到目前为止： 我尝试使用一个内部有 20 个 div 的 div，每个部分对应一个部分，每个部分都有一个图像，然后我尝试用 CSS 绘制它们；我还尝试了第一种方法，只有一个 div 和里面的所有东西......

问题： 到目前为止，当我调整窗口大小时，所有解决方案都失败了。我尝试将位置作为绝对，作为相对，......

所以：我需要放置最多 20 个圆圈，CSS 或 SVG（最好），可以通过用户交互单独解决每个圆圈（单击它以更改颜色），并且调整窗口大小时保持其形状。

下面我放了一张我想在 html 中重新创建的毛毛虫的图像：

任何提示、指示或操作方法都会有所帮助。或者，如果您对如何解决此问题有任何其他看法...

干杯！

Answer 1

有几种方法可以让您的 Catterpillar 做出响应。您可以使用 svg、多个元素/伪元素、box-shadows...

这是一个使用多个 box shadows 的示例，此处描述的方法：Overlapping circles in CSS with 1 div 使用第二个示例和视口相关单元：

DEMO

div{
  width:20vmin; height:20vmin;
  border-radius:50%;
  background:gold;
  margin:0 auto;
  box-shadow: -10vmin   1vmin  0  .2vmin teal,
              -18vmin  .5vmin  0   1vmin pink,
              -25vmin  .8vmin  0  .5vmin tomato,
              -37vmin   1vmin  0  .2vmin green,
              -50vmin   1vmin  0  .5vmin teal,
              -63vmin   1vmin  0  .2vmin aqua;
}

<div></div>

下面是一个使用带有圆形元素的svg 的示例：

svg{
  display:block;
  width:100%;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20">
    <circle cx="35" cy="10" r="4" fill="green" stroke="black" stroke-width="0.5" />
    <circle cx="40" cy="9" r="5.1" fill="teal" stroke="black" stroke-width="0.5" />
    <circle cx="46" cy="11" r="5" fill="pink" stroke="black" stroke-width="0.5" />
    <circle cx="50" cy="10" r="4" fill="tomato" stroke="black" stroke-width="0.5" />    
</svg>

Answer 2

您使用图像和绝对定位的方法可以工作，但对left 属性使用百分比值：

http://jsfiddle.net/0dea7r75/

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

CSS

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

Answer 3

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

var circles = [
    {
        left: 5,
        top: 5,
        radius: 5
    },
    {
        left: 7.5,
        top: 7,
        radius: 8
    },
    {
        left: 11.5,
        top: 10,
        radius: 8
    },
    {
        left: 14.5,
        top: 14,
        radius: 9
    }
];
var wormBox = $('.worm');
$.each(circles, function(i, data) {
    var circle = $('<div class="circle"><div class="color"></div></div>');
    circle.css({
        'width': data.radius+'%',
        'padding-bottom': data.radius+'%',
        'left': data.left+'%',
        'top': data.top+'%'
    });
    circle.appendTo( wormBox );
});
$('.color').on('click', function(e) {
   // Test color with random
    var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
    $(this).css({
        'background-color': randomColor
    });
});

.worm {
    position: relative;
    padding-bottom: 50%;
    border: 1px solid #000;
}
.circle {
    position: absolute;
    display: block;
    border: 1px solid #000;
    border-radius: 50%;
    background: none #000;
}
.color {
    position: absolute;
    top: 3%;
    right: 3%;
    bottom: 3%;
    left: 3%;
    width: 94%;
    background: none #fff;
    border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="worm"></div>

调整浏览器宽度将调整.worm 内所有元素的大小。单击圆圈将添加随机背景颜色。

请注意：我使用了脚本，但结果是纯 HTML/CSS（您只需要脚本进行着色）。

另一个注意事项：由于您使用纯 html，因此您还可以为您的蠕虫制作动画。

Fiddle 上也有相同的脚本。