CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Akbar Basha
Akbar Basha

Reputation: 1198

how to set the exact width in svg

If I hover over the rectangle, the border size is exceed the rectangle size. I know because parent node width is 100 that's why the rectangle border is shown.

If I set the parent node width as 40, it's working fine but I need that same behavior without changing parent node's width and stroke-width.

How can I achieve this?

// In mouse hover, I have set the style:
var links = $('#ch');
links.hover(function() {
  $('#ch').attr('class', 'st');
}, function() { //mouseout
  $('#ch').attr('class', '');
});
.st {
  stroke-width: 60px;
  stroke: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<svg id='par' width="100" height="40">
  <rect id='ch' width="40" height="40" style="fill:rgb(0,0,255)" />
</svg>

Upvotes: 2

Views: 225

Answers (3)

Akbar Basha
Akbar Basha

Reputation: 1198

found the answer,

<svg width="100" height="100">
    <defs>
        <clipPath id="clipRect">
            <rect width="40" height="40" />
        </clipPath>
    </defs>
    <rect id ='ch' width="40" height="40" clip-path=url(#clipRect)   style="fill:rgb(0,0,255)" stroke-width="8px" stroke="red" />
</svg>

Sample

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 123985

You mean like this? Changing the fill colour would be simpler.

Other ways would be creating a clipPath or using the clip CSS property.

// In mouse hover, I have set the style:
var links = $('#ch');
links.hover(function() {
  $('#ch').attr('class', 'st');
}, function() { //mouseout
  $('#ch').attr('class', '');
});
.st {
  stroke-width: 60px;
  stroke: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<svg id='par' width="100" height="40">
  <svg width="40" height="40">
      <rect id='ch' width="40" height="40" style="fill:rgb(0,0,255)" />
  </svg>
</svg>

Upvotes: 0

maioman
maioman

Reputation: 18734

What's preventing the svg from overflowing is svg:not(:root){overflow:hidden} in your UA styles (on chrome),

So if you set it to visible it will work:

svg:not(:root) { overflow : visible; }

FIDDLE

Upvotes: 1

Related Questions