CODEWITHSUNDEEP
htmlcsssvg
Raymond
Raymond

Reputation: 137

Why is this an empty space appearing inside of SVG element?

I have the fiddle with this problem. If I set viewBox property on the symbol element, icon displayed correctly. But if I set viewBox with same value on svg element with use inside, around use element appears weird empty space, inside of SVG-container.

Viewport of first variant is the same with viewport of second variant - 35x35px size at 2.5x3.5px coords.

What's the reason of this behavior? Bug or my own mistake?

EDIT: Add picture with correct and incorrect areas. Empty space inside SVG

#svg-icons {
  display: none;
}
.icon {
  display: inline-block;
  border: 1px solid red;
}
.icon + .icon {
  margin-left: 20px;
}
<svg version="1.1" id="svg-icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="icon-1" viewBox="2.5 3.5 35 35">
    <rect x="2.5" y="3.5" stroke="#000000" stroke-miterlimit="10" width="35" height="35" />
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="20" cy="21" r="14" />
  </symbol>
  <symbol id="icon-2">
    <rect x="2.5" y="3.5" stroke="#000000" stroke-miterlimit="10" width="35" height="35" />
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="20" cy="21" r="14" />
  </symbol>
</svg>

<svg class="icon icon-1" width="100" height="100">
  <use xlink:href="#icon-1"></use>
</svg>

<svg class="icon icon-2" viewBox="2.5 3.5 35 35" width="100">
  <use xlink:href="#icon-2"></use>
</svg>

Upvotes: 3

Views: 1128

Answers (1)

defghi1977
defghi1977

Reputation: 5349

This probrem will be solved by thinking about how the use element is treated on drawing.
According to SVG 1.1 2nd edition, use element refers symbol element is treated as svg element on drawing. So the result by that svg structure is same as this.

<svg class="icon icon-2" viewBox="2.5 3.5 35 35" width="100">
    <g>
        <svg width="100%" height="100%">
            <rect x="2.5" y="3.5" stroke="#000000" stroke-miterlimit="10" width="35" height="35" />
            <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="20" cy="21" r="14" />
        </svg>
    </g>
</svg>

Inner svg element has range of 100% width and height positioned at (0,0), and outer svg element has viewBox offset to (2.5, 3.5).
Thus shapes are cutoff by displacement of 2 svg element's rendering ranges.

Upvotes: 1

Related Questions