SVG center horizontal and vertical line

For an SVG’s contents to scale with its size, it needs to have a viewBox.

svg {
  background-color: linen;
}

.point {
  stroke: black;
  stroke-width: 1;
}
<svg width="10px" height="10px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

<svg width="30px" height="30px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

<svg width="100px" height="100px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

 Run code snippetExpand snippet

In this example, everything scales, including the line width. If that’s not what you want, then you can either use @SirExotic’s approach (using percentage coordinates), or you could set the lines to not scale by using vector-effect: non-scaling-stroke.

svg {
  background-color: linen;
}

.point {
  stroke: black;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
<svg width="10px" height="10px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

<svg width="30px" height="30px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

<svg width="100px" height="100px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

 Run code snippetExpand snippet

Related Posts:

  1. 100% DIV width is not really 100%
  2. CSS reset – What exactly does it do?
  3. When to use margin vs padding in CSS [closed]
  4. Can I change Bootstrap button color?
  5. Is it bad practice to comment out single lines of CSS with //?
  6. How to draw a half circle (border, outline only) [closed]
  7. Adding border to SVG image
  8. CSS Circle with border
  9. Set line spacing
  10. Set parent style via child
  11. What is the proper way to display a logo with CSS?
  12. Responsive font size in CSS
  13. How to make a vertical line in HTML
  14. CSS Font Border?
  15. How do I change the background color with JavaScript?
  16. Why em instead of px?
  17. Vertical Align Center in Bootstrap
  18. Button Center CSS
  19. Centering a background image, using CSS
  20. How to change the cursor into a hand when a user hovers over a list item?
  21. not:first-child selector
  22. How to change the color of an svg element?
  23. CSS: center element within a
  24. How to set up fixed width for ?
  25. what is a parse error and how do I fix it
  26. draw diagonal lines in div background with CSS
  27. Bootstrap NavBar with left, center or right aligned items
  28. How to set up fixed width for ?
  29. How to make the overflow CSS property work with hidden as value
  30. How to make a sticky footer in react?
  31. How to push a footer to the bottom of page when content is short or missing?
  32. Linking to a pdf file with html
  33. Can I add background color only for padding?
  34. Change TD border color with HTML or CSS
  35. Why adding version number to CSS file path?
  36. Hide text using css
  37. Changing the width of Bootstrap popover
  38. CSS background color not working
  39. SVG Fill Color Not Working
  40. Bootstrap transparent navbar
  41. jQuery toggle CSS?
  42. CSS 3 slide-in from left transition
  43. CSS selectors ul li a {…} vs ul > li > a {…}
  44. CSS div width not working
  45. Bootstrap scrollable panel
  46. CSS checkbox input styling
  47. Is there a CSS selector for elements containing certain text?
  48. Responsive media query not working in Google Chrome
  49. How to place two divs next to each other?
  50. Background color in input and text fields
  51. CSS3 opacity gradient?
  52. SVG drop shadow using css3
  53. CSS3 background image transition
  54. How to import Google Web Font in CSS file?
  55. CSS Equivalent of the “if” statement
  56. How can I make a div not larger than its contents?
  57. How do I center an SVG in a div?
  58. CSS – why doesn’t percentage height work? [duplicate]
  59. How to make div background color transparent in CSS
  60. td widths, not working?
  61. Stylizing external SVG files with jQuery and CSS
  62. How to upload and style svg logo?
  63. SVG in list-style-image breaks when adding fill
  64. Can you change the color of svg icons to the global color I choose from WordPress
  65. change with CSS the color of an svg background image set with “background-image: url()”
  66. why I could not use data in WordPress additional css part
  67. Open source social media icons to download and use on website? [closed]
  68. How to make a monopoly board using css grid?
  69. What’s the difference between SCSS and Sass?
  70. How am I supposed to use index.html?
  71. Half circle with CSS (border, outline only)
  72. CSS calc width and height values
  73. Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3
  74. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  75. What does !important mean in CSS?
  76. Failed to load resource: the server responded with a status of 404 (Not Found)
  77. Random gradient background color
  78. How to horizontally center an element
  79. Center image using text-align center?
  80. Unblur content inside blurring background div
  81. How do I make a transparent border with CSS?
  82. Failed to load resource: the server responded with a status of 404 (Not Found)
  83. Failed to load resource: the server responded with a status of 404 (Not Found) css
  84. How to change CSS using jQuery?
  85. See answer keys in Google Form (quiz) source page?
  86. CSS Background Opacity [duplicate]
  87. Remove blue underline from link
  88. Angular: conditional class with *ngClass
  89. CSS Background Opacity [duplicate]
  90. Outline effect to text
  91. Customize Bootstrap checkboxes
  92. Making a
  93. Converts scss to css [closed]
  94. React.js inline style best practices [closed]
  95. Remove class using jQuery
  96. What is a user agent stylesheet?
  97. Using two CSS classes on one element
  98. What is the difference between CSS and SCSS?
  99. What is a user agent stylesheet?
  100. How do I vertically align text in a div?

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)