Using display block on SVG elements

Discussion in 'HTML & Website Design' started by everlive, Feb 23, 2016.

0
  1. #1
    Anyone know what or how to implement display:block; on SVG elements like <svg> and <a>? I ask this because once you start working inside the <svg> parent all the children work as if they are set to absolute positioning and refuse to interact with each other.

    Is my only option to use transform?

    The same issue applies to width and height on <a>.
     
    everlive, Feb 23, 2016 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    <svg> I believe is a HTML element,
    so any CSS rules to be applied to it should work.

    Have a link to related webpage?
     
    hdewantara, Feb 23, 2016 IP
  3. everlive

    everlive Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    No, working on this on my desktop and from what I understand of the W3C documentation certain properties like display:block; do not work on child elements within <svg>.

    I am trying to figure out how to extract the width and height from a <polygon>.
     
    everlive, Feb 24, 2016 IP
  4. denis bayly

    denis bayly Well-Known Member

    Messages:
    110
    Likes Received:
    29
    Best Answers:
    6
    Trophy Points:
    105
    #4
    Hi there everlive,

    may we see your svg code?

    It would give members a chance to assess your problem(s). ;)

    ​
    coothead
     
    denis bayly, Feb 24, 2016 IP
  5. everlive

    everlive Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    https://forums.digitalpoint.com/threads/svg-child-element-attribute-grabbing.2775183/#post-19301827
     
    everlive, Feb 24, 2016 IP
  6. denis bayly

    denis bayly Well-Known Member

    Messages:
    110
    Likes Received:
    29
    Best Answers:
    6
    Trophy Points:
    105
    #6
    Hi there everlive,

    in my test the "console.log" returns a value of "auto" for the "polygon". ;)

    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>
    Code (markup):
    coothead​
     
    denis bayly, Feb 24, 2016 IP
  7. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #7
    May I ask why you need to get the width and height?
    As far as I can see, the a-element inside the SVG is "block" in that it covers the entire svg-element - which I assume would be the normal behavior - what is it you want to do? Perhaps there is another way?
     
    PoPSiCLe, Feb 24, 2016 IP
  8. Tedel

    Tedel Well-Known Member

    Messages:
    326
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    130
    #8
    SVG files will grow to the width of the screen unless the CSS limits them…
     
    Tedel, Mar 22, 2016 IP