Как сделать несколько SVG, которые сложены друг на друга, реагировать на рост/ширину своего родительского div?

Question

У меня есть 3 формы через SVG, которые я преобразовал в html.

В настоящее время у меня есть эти 3 формы, сложенные вместе, разделяющие родительский div, в результате получается форма алмаза (иш).

У меня возникли проблемы с переустановкой этих элементов. Я бы хотел, чтобы они изменяли размер как единое целое, если это имеет смысл.

Любая помощь всегда ценится!

body{ 
 
\t background:#E5E5E5 
 
\t } 
 

 
.diamond{ 
 
\t margin:50px; 
 
\t width:auto; 
 
\t height:auto; 
 
\t background:blue; 
 
\t position:absolute; 
 
\t } 
 

 
.Octagon, .Star8, .Star8_2{ 
 
\t position:absolute; 
 
\t float:left; 
 
\t } 
 
.Octagon{ 
 
\t height:401px; 
 
\t width:401px; 
 
\t } 
 
.Star8{ 
 
\t height:399px; 
 
\t width:399px; 
 
\t margin:1px; 
 
\t } 
 
.Star8_2{ 
 
\t height:282px; 
 
\t width:282px; 
 
\t margin:59px; 
 
\t } 
 
\t 
 
svg path{ 
 
\t stroke:#777; 
 
\t stroke-width:3px; 
 
\t fill:transparent; 
 
\t } 
 
svg{ 
 
\t height:100%; 
 
\t width:100%; 
 
\t } 
 
\t 
 
\t

<div class="diamond"> 
 

 
<div class="Star8_2"> 
 
<svg> 
 
<path d="M58.8,60.1C67.6,40.5,75.5,20.4,83.9,0.6C103.7,8.9,123.5,17.1,143.3,25.4C162.7,17.6,182,9.5,201.3,1.6C209.3,20.9,217.1,40.3, 
 
225.2,59.5C244.2,67.5,263.2,75.4,282.2,83.3C274.3,102.3,266.3,121.3,258.4,140.4C266.7,160.5,274.9,180.6,283.2,200.7C263.8,208.6,244.5,216.6,225.1,224.5C224,225,222.7, 
 
225.3,222.3,226.6C214.6,244.9,207,263.2,199.4,281.5C181.2,273.9,163.1,266.3,144.9,258.8C143.7,258.2,142.6,258.3,141.5,258.9C122.3,266.8,103.2,274.7,84,282.5C76.3,263.9, 
 
68.7,245.3,61,226.6C60.3,225.1,60,223.1,58.1,222.6C39.1,214.7,20.1,206.7,1.1,198.8C9,180,16.9,161.1,24.7,142.3C25.3,141.2,25.4,140,24.8,138.9C17.2,120.4,9.6,102,2.1, 
 
83.5C21,75.6,40,68,58.8,60.1L58.8,60.1" transform="matrix(1,0,0,1,-1.1,-0.6)"></path> 
 
</svg> 
 
</div> 
 

 
<div class="Star8"> 
 
<svg> 
 
<path d="M141.6,58C160.8,38.6,180.2,19.4,199.5,0C218.6,19.1,237.7,38.1,256.7,57.2C257.7,58.5,259.5,57.8,260.9,58C287.2,58,313.6,58, 
 
339.9,58C339.9,85.5,339.9,113,339.9,140.6C359.6,160.2,379.2,179.9,398.9,199.5C379.2,219.1,359.6,238.8,339.9,258.4C339.8,285.6,339.9,312.8,339.9,340C312.7,340,285.5, 
 
339.9,258.3,340C238.7,359.7,219,379.3,199.4,399C179.8,379.4,160.1,359.8,140.5,340C113,339.9,85.4,340,57.9,340C57.9,312.5,58,284.9,57.9,257.4C38.5,238.2,19.3,218.8, 
 
-0.1,199.5C19.2,180.2,38.5,160.8,57.9,141.5C57.9,113.6,57.9,85.8,57.9,57.9C85.9,58,113.7,58,141.6,58L141.6,58" transform="matrix(1,0,0,1,0.1,0)"><br> 
 
</path> 
 
</svg> 
 
</div> 
 

 
<div class="Octagon"> 
 
<svg> 
 
<path d="M59.6,60.6C106.7,41.1,153.9,21.5,201,2C248.1,21.5,295.3,41,342.4,60.6C361.9,107.7,381.4,154.9,401,202C381.5,249.2, 
 
361.9,296.3,342.4,343.5C295.3,363,248.1,382.5,201,402.1C153.9,382.6,106.7,363.1,59.6,343.5C40.1,296.3,20.5,249.1,1,202C20.5,154.9,40.1,107.7,59.6, 
 
60.6L59.6,60.6" transform="matrix(1,0,0,1,-1,-2)"></path> 
 
</svg> 
 
</div> 
 

 
</div>

Answer 1

Просто дайте свой SVGs соответствуют viewBox атрибутам, которые гарантируют, что они выстраиваются в очередь при визуализации того же размера.

Затем вы можете установить размер «бриллианта» на все, что захотите, и SVG будут масштабироваться в унисон.

body { 
 
    background: #E5E5E5 
 
} 
 

 
.diamond { 
 
    margin: 50px; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: yellow; 
 
    position: relative; 
 
} 
 

 
.Octagon, .Star8, .Star8_2 { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
    \t 
 
svg path { 
 
    stroke: #777; 
 
    stroke-width: 3px; 
 
    fill: transparent; 
 
} 
 

 
svg { 
 
    height:100%; 
 
    width:100%; 
 
}

<div class="diamond"> 
 

 
<div class="Star8_2"> 
 
<svg viewBox="-59 -59 401 401"> 
 
<path d="M58.8,60.1C67.6,40.5,75.5,20.4,83.9,0.6C103.7,8.9,123.5,17.1,143.3,25.4C162.7,17.6,182,9.5,201.3,1.6C209.3,20.9,217.1,40.3, 
 
225.2,59.5C244.2,67.5,263.2,75.4,282.2,83.3C274.3,102.3,266.3,121.3,258.4,140.4C266.7,160.5,274.9,180.6,283.2,200.7C263.8,208.6,244.5,216.6,225.1,224.5C224,225,222.7, 
 
225.3,222.3,226.6C214.6,244.9,207,263.2,199.4,281.5C181.2,273.9,163.1,266.3,144.9,258.8C143.7,258.2,142.6,258.3,141.5,258.9C122.3,266.8,103.2,274.7,84,282.5C76.3,263.9, 
 
68.7,245.3,61,226.6C60.3,225.1,60,223.1,58.1,222.6C39.1,214.7,20.1,206.7,1.1,198.8C9,180,16.9,161.1,24.7,142.3C25.3,141.2,25.4,140,24.8,138.9C17.2,120.4,9.6,102,2.1, 
 
83.5C21,75.6,40,68,58.8,60.1L58.8,60.1" transform="matrix(1,0,0,1,-1.1,-0.6)"></path> 
 
</svg> 
 
</div> 
 

 
<div class="Star8"> 
 
<svg viewBox="-1 -1 401 401"> 
 
<path d="M141.6,58C160.8,38.6,180.2,19.4,199.5,0C218.6,19.1,237.7,38.1,256.7,57.2C257.7,58.5,259.5,57.8,260.9,58C287.2,58,313.6,58, 
 
339.9,58C339.9,85.5,339.9,113,339.9,140.6C359.6,160.2,379.2,179.9,398.9,199.5C379.2,219.1,359.6,238.8,339.9,258.4C339.8,285.6,339.9,312.8,339.9,340C312.7,340,285.5, 
 
339.9,258.3,340C238.7,359.7,219,379.3,199.4,399C179.8,379.4,160.1,359.8,140.5,340C113,339.9,85.4,340,57.9,340C57.9,312.5,58,284.9,57.9,257.4C38.5,238.2,19.3,218.8, 
 
-0.1,199.5C19.2,180.2,38.5,160.8,57.9,141.5C57.9,113.6,57.9,85.8,57.9,57.9C85.9,58,113.7,58,141.6,58L141.6,58" transform="matrix(1,0,0,1,0.1,0)"><br> 
 
</path> 
 
</svg> 
 
</div> 
 

 
<div class="Octagon"> 
 
<svg viewBox="0 0 401 401"> 
 
<path d="M59.6,60.6C106.7,41.1,153.9,21.5,201,2C248.1,21.5,295.3,41,342.4,60.6C361.9,107.7,381.4,154.9,401,202C381.5,249.2, 
 
361.9,296.3,342.4,343.5C295.3,363,248.1,382.5,201,402.1C153.9,382.6,106.7,363.1,59.6,343.5C40.1,296.3,20.5,249.1,1,202C20.5,154.9,40.1,107.7,59.6, 
 
60.6L59.6,60.6" transform="matrix(1,0,0,1,-1,-2)"></path> 
 
</svg> 
 
</div> 
 

 
</div>

Answer 2

Я сделал это давным-давно с помощью JQuery. Вы должны использовать событие «.resize()» jQuery, которое будет запускаться всякий раз, когда размер выбранного элемента будет изменен. Это будет выглядеть следующим образом ..

$(".someElement").resize(function(){ 
    // your code 
}); 

Внутри этой функции вы можете обновить координаты себя в соответствии с шириной «.someElement», который вы можете получить, используя ..

$(".someElement").width();