Stretching one of the three svg in width in a block

1

I need to stretching one of the three svg in a block. So, first and last svg must be always 100px width and second svg should be 100px, 200px, 1000px, but they must be closed to each other without between space.

 HTML

 <div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

CSS

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

  width: 500px;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

JSFIDDLE

html css svg

share|improve this question

asked Nov 19 '18 at 14:07

Дмитрий Попов

205

add a comment | 

1

I need to stretching one of the three svg in a block. So, first and last svg must be always 100px width and second svg should be 100px, 200px, 1000px, but they must be closed to each other without between space.

 HTML

 <div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

CSS

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

  width: 500px;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

JSFIDDLE

html css svg

share|improve this question

asked Nov 19 '18 at 14:07

Дмитрий Попов

205

add a comment | 

1

1

1

I need to stretching one of the three svg in a block. So, first and last svg must be always 100px width and second svg should be 100px, 200px, 1000px, but they must be closed to each other without between space.

 HTML

 <div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

CSS

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

  width: 500px;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

JSFIDDLE

html css svg

share|improve this question

asked Nov 19 '18 at 14:07

Дмитрий Попов

205

I need to stretching one of the three svg in a block. So, first and last svg must be always 100px width and second svg should be 100px, 200px, 1000px, but they must be closed to each other without between space.

 HTML

 <div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

CSS

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

  width: 500px;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

JSFIDDLE

html css svg

html css svg

share|improve this question

asked Nov 19 '18 at 14:07

Дмитрий Попов

205

share|improve this question

asked Nov 19 '18 at 14:07

Дмитрий Попов

205

share|improve this question

share|improve this question

asked Nov 19 '18 at 14:07

Дмитрий Попов

205

asked Nov 19 '18 at 14:07

Дмитрий Попов

205

asked Nov 19 '18 at 14:07

Дмитрий Попов

205

205

add a comment | 

add a comment | 

2 Answers
2

active

oldest

votes

0

As the container is flex, you can just add flex-grow:1; to the svg you want to grow:

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

 

 .container svg:nth-child(2) {flex-grow:1;}

<div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

If you are wanting set widths of 100, 200 and 1000, then you will need to use media queries and define when you want those widths to be used

share|improve this answer

answered Nov 19 '18 at 14:20

Pete

40.6k1875116

• 
  
  
  

  
  

  
  
  
  
  
  

  
  thanks, but if i want center line instead of a rectangle? Will this work?
  – Дмитрий Попов
  Nov 19 '18 at 14:27
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Probably not (because you are using preserveAspectRatio="none"). If you have additional requirements, then include them in your question.
  – Paul LeBeau
  Nov 19 '18 at 14:42
  
  
  

  
  
  
  

add a comment | 

0

Here is some alternative static solution i dont know it helps or not but yes you can control individual svg by css.

.container {

  display: flex;

  align-items:center;

}

svg {

  width: 100%;

  height: 100px;

}

svg:nth-child(2) {

  width: 1000px;

}

svg rect.st2 {

  fill: red;

}

svg rect.st1 {

  fill: green;

  width: 2000px;

}

svg rect.st0 {

  fill: blue;

}

JSFIDDLE

share|improve this answer

answered Nov 19 '18 at 14:44

Prameshwar Kumar

574

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53376408%2fstretching-one-of-the-three-svg-in-width-in-a-block%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

As the container is flex, you can just add flex-grow:1; to the svg you want to grow:

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

 

 .container svg:nth-child(2) {flex-grow:1;}

<div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

If you are wanting set widths of 100, 200 and 1000, then you will need to use media queries and define when you want those widths to be used

share|improve this answer

answered Nov 19 '18 at 14:20

Pete

40.6k1875116

• 
  
  
  

  
  

  
  
  
  
  
  

  
  thanks, but if i want center line instead of a rectangle? Will this work?
  – Дмитрий Попов
  Nov 19 '18 at 14:27
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Probably not (because you are using preserveAspectRatio="none"). If you have additional requirements, then include them in your question.
  – Paul LeBeau
  Nov 19 '18 at 14:42
  
  
  

  
  
  
  

add a comment | 

0

As the container is flex, you can just add flex-grow:1; to the svg you want to grow:

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

 

 .container svg:nth-child(2) {flex-grow:1;}

<div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

If you are wanting set widths of 100, 200 and 1000, then you will need to use media queries and define when you want those widths to be used

share|improve this answer

answered Nov 19 '18 at 14:20

Pete

40.6k1875116

• 
  
  
  

  
  

  
  
  
  
  
  

  
  thanks, but if i want center line instead of a rectangle? Will this work?
  – Дмитрий Попов
  Nov 19 '18 at 14:27
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Probably not (because you are using preserveAspectRatio="none"). If you have additional requirements, then include them in your question.
  – Paul LeBeau
  Nov 19 '18 at 14:42
  
  
  

  
  
  
  

add a comment | 

0

0

0

As the container is flex, you can just add flex-grow:1; to the svg you want to grow:

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

 

 .container svg:nth-child(2) {flex-grow:1;}

<div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

If you are wanting set widths of 100, 200 and 1000, then you will need to use media queries and define when you want those widths to be used

share|improve this answer

answered Nov 19 '18 at 14:20

Pete

40.6k1875116

As the container is flex, you can just add flex-grow:1; to the svg you want to grow:

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

 

 .container svg:nth-child(2) {flex-grow:1;}

<div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

If you are wanting set widths of 100, 200 and 1000, then you will need to use media queries and define when you want those widths to be used

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

 

 .container svg:nth-child(2) {flex-grow:1;}

<div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

 

 .container svg:nth-child(2) {flex-grow:1;}

<div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

share|improve this answer

answered Nov 19 '18 at 14:20

Pete

40.6k1875116

share|improve this answer

share|improve this answer

answered Nov 19 '18 at 14:20

Pete

40.6k1875116

answered Nov 19 '18 at 14:20

Pete

40.6k1875116

answered Nov 19 '18 at 14:20

Pete

40.6k1875116

40.6k1875116

• 
  
  
  

  
  

  
  
  
  
  
  

  
  thanks, but if i want center line instead of a rectangle? Will this work?
  – Дмитрий Попов
  Nov 19 '18 at 14:27
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Probably not (because you are using preserveAspectRatio="none"). If you have additional requirements, then include them in your question.
  – Paul LeBeau
  Nov 19 '18 at 14:42
  
  
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  thanks, but if i want center line instead of a rectangle? Will this work?
  – Дмитрий Попов
  Nov 19 '18 at 14:27
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Probably not (because you are using preserveAspectRatio="none"). If you have additional requirements, then include them in your question.
  – Paul LeBeau
  Nov 19 '18 at 14:42
  
  
  

  
  
  
  

thanks, but if i want center line instead of a rectangle? Will this work?
– Дмитрий Попов
Nov 19 '18 at 14:27

thanks, but if i want center line instead of a rectangle? Will this work?
– Дмитрий Попов
Nov 19 '18 at 14:27

1

1

Probably not (because you are using preserveAspectRatio="none"). If you have additional requirements, then include them in your question.
– Paul LeBeau
Nov 19 '18 at 14:42

Probably not (because you are using preserveAspectRatio="none"). If you have additional requirements, then include them in your question.
– Paul LeBeau
Nov 19 '18 at 14:42

add a comment | 

0

Here is some alternative static solution i dont know it helps or not but yes you can control individual svg by css.

.container {

  display: flex;

  align-items:center;

}

svg {

  width: 100%;

  height: 100px;

}

svg:nth-child(2) {

  width: 1000px;

}

svg rect.st2 {

  fill: red;

}

svg rect.st1 {

  fill: green;

  width: 2000px;

}

svg rect.st0 {

  fill: blue;

}

JSFIDDLE

share|improve this answer

answered Nov 19 '18 at 14:44

Prameshwar Kumar

574

add a comment | 

0

Here is some alternative static solution i dont know it helps or not but yes you can control individual svg by css.

.container {

  display: flex;

  align-items:center;

}

svg {

  width: 100%;

  height: 100px;

}

svg:nth-child(2) {

  width: 1000px;

}

svg rect.st2 {

  fill: red;

}

svg rect.st1 {

  fill: green;

  width: 2000px;

}

svg rect.st0 {

  fill: blue;

}

JSFIDDLE

share|improve this answer

answered Nov 19 '18 at 14:44

Prameshwar Kumar

574

add a comment | 

0

0

0

Here is some alternative static solution i dont know it helps or not but yes you can control individual svg by css.

.container {

  display: flex;

  align-items:center;

}

svg {

  width: 100%;

  height: 100px;

}

svg:nth-child(2) {

  width: 1000px;

}

svg rect.st2 {

  fill: red;

}

svg rect.st1 {

  fill: green;

  width: 2000px;

}

svg rect.st0 {

  fill: blue;

}

JSFIDDLE

share|improve this answer

answered Nov 19 '18 at 14:44

Prameshwar Kumar

574

Here is some alternative static solution i dont know it helps or not but yes you can control individual svg by css.

.container {

  display: flex;

  align-items:center;

}

svg {

  width: 100%;

  height: 100px;

}

svg:nth-child(2) {

  width: 1000px;

}

svg rect.st2 {

  fill: red;

}

svg rect.st1 {

  fill: green;

  width: 2000px;

}

svg rect.st0 {

  fill: blue;

}

JSFIDDLE

share|improve this answer

answered Nov 19 '18 at 14:44

Prameshwar Kumar

574

share|improve this answer

share|improve this answer

answered Nov 19 '18 at 14:44

Prameshwar Kumar

574

answered Nov 19 '18 at 14:44

Prameshwar Kumar

574

answered Nov 19 '18 at 14:44

Prameshwar Kumar

574

574

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53376408%2fstretching-one-of-the-three-svg-in-width-in-a-block%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here