Trying to get display block on SVG anchors to work

HTML & CSS
1

So I am building some SVG elements and I noticed that elements within SVG are not block-level and seem to be positioned absolute. Is there a way to make them work like normal block-level elements?

1 Like
2

You can wrap them in a block container such as <div>. You could add a class to the container to have more control over its appearance.
You can also apply classes directly to the <svg> element and its sub elements like <path> for use in css selectors, if the svg is an inline element, as in not referenced by <img> src attribute.

3

That’s no good because I am trying to target the <a> child element of SVG. From the W3C documentation this is not possible and only display:none works which is kind of annoying.

4

Can you explain more clearly what you are trying to do? Maybe post some code or a link.

1 Like
5

Hi there everlive,

in my test the “console.log” returns a value of “auto” for the “polygon”. :ok:

Here is my test code…

<!DOCTYPE html>
<html  lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
svg {
    display:block;
    width:20%;
    margin:auto;
 }
</style>
</head>
<body> 
 <svg class="polu" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
  <a class="polu2" xlink:href="deviantart.com" >
   <polygon class="polu3" fill="red" stroke="brown" points="45,2 2,45 45,88 88,45"/>
  </a>
 </svg>
<script>
(function() {
   'use strict';
   var el=document.getElementsByClassName('polu')[0];
   var el3=document.getElementsByClassName('polu3')[0];
   var svgWidth=window.getComputedStyle(el).getPropertyValue('width');
   var polyWidth=window.getComputedStyle(el3).getPropertyValue('width');
   console.log(svgWidth+' svg width \n'+polyWidth+' polygon width');
})();
</script>

</body>
</html>

coothead

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.