Как исправить усечение верхнего и левого SVG?

Я создал эллипс в SVG с stroke-width и stroke, но верхняя и левая стороны штриха усечены. Они, кажется, переполнены за пределами содержащего тега svg. Я попытался использовать свойство overflow:visible; на SVG, но он все еще не работает.Как исправить усечение верхнего и левого SVG?

Ниже мой HTML:

<div id="div1"> 
    <svg id="svg1"> 
     <ellipse id="oval1" cx="164.041666625656" cy="96.1319444204114" rx="164.041666625656" ry="96.1319444204114"></ellipse> 
    </svg> 
</div>

И это его CSS:

#div1 { 
    padding:10px; 
    margin:10px; 
} 
#svg1 { 
    overflow:visible; 
    margin-left:86.4305555339479; 
    margin-top:-4.409722221119791; 
} 

#oval1 { 
    fill:hsl(50.7692307692305,27.6595744680847%,68.0882352941177%); 
    stroke-width:5.291666665343749; 
    stroke:hsl(79.5918367346938,41.8803418803418%,40.5882352941176%); 
}

Вы можете увидеть running code here, а также.

У меня была аналогичная проблема с прямоугольниками в прошлом, и они были исправлены после использования overflow:visible; для содержащего svg. Но сейчас это не похоже на эллипсы.

Может ли кто-нибудь помочь мне исправить проблему?

Thnx заранее!

источник

2013-11-13 Surender Thakran

Кажется, хорошо для меня на Firefox. Возможно, UA, который вы используете, не поддерживает переполнение: видимый –

@RobertLongson да, я только что проверил, его работает отлично на firefox, но показывается проблема в хроме и хроме (оба обновляются). Можете ли вы предложить решение? –

Вы имеете в виду, кроме использования Firefox ;-) –

UPDATE: Похоже, есть активная ошибка такого поведения, по меньшей мере, Chrome (https://code.google.com/p/chromium/issues/detail?id=231577) и был для Firefox, а также (https://bugzilla.mozilla.org/show_bug.cgi?id=378923). Так что в зависимости от версии вам может быть не повезло. Начиная с написания, это не исправлено в Chrome (32.0.1700.6 бета), и здесь вы можете попробовать скрипку: http://jsfiddle.net/HRsvX/36/ все три треугольника должны быть полностью видимыми, если браузер реализует текущую спецификацию SVG 1.1. Скрипт воспроизводится ниже.

Внутренняя область круга граничит с элементом SVG. Перед HTML5t сам SVG-элемент похож на изображение или флеш-ролик, он не может переполняться в html-документ, поэтому он имеет собственный холст. Когда вы добавляете штрих (который по умолчанию находится за пределами области, которую вы определили), штрих окажется вне холста SVG. Вам нужно будет учитывать это в центрировании круга:

Центр должен быть радиусом + ширина хода, поэтому ваш центр x, например, должен быть равен 164.041666625656 + 5.291666665343749 минимум, чтобы полностью вписаться в SVG.

Если вы указываете тип документа HTML5 и используете встроенный SVG, как в вашем примере, он должен отображать переполняющий контент, поскольку значение по умолчанию для переполнения видимо, а HTML5 допускает переполнение на встроенных элементах SVG.

Так что либо проверьте свой doctype, либо переместите центр, чтобы учесть ширину хода.

Подробнее о переполнении элементов SVG можно найти в Mozilla developer documents и в хорошем примере на this MSDN blog, который объясняет переполнение по умолчанию.

HTML

<div><svg height="100" width="100" viewbox="00 0 100 100"> 
    <path d="M210 10 L90 10 L90 90 " fill="red"/> 
</svg></div> 

<div><svg id="clip1" height="100" width="100" viewbox="00 0 100 100"> 
    <path d="M210 10 L90 10 L90 90 " fill="red"/> 
</svg></div>

CSS

div { 
    height:100px; width:100px; 
    margin:1em auto; 
    border: solid 1px black; 
} 

svg { overflow:visible } 

#clip1 {clip: rect(-10px,-10px,-10px,-10px)} //nope 
#clip2 {clip: auto} //nope

источник

2013-11-13 13:13:51

У меня нет проблемы с переполнением эллипса содержащим svg-тегом, у меня были аналогичные проблемы в прошлом с прямоугольниками. Проблема в том, что переполняющая часть не становится видимой после использования 'overflow: visible;' в хром, как для прямоугольников. –

@SurenderThakran Я предлагаю вам убедиться, что ваш HTML начинается с '', чтобы убедиться, что он действительно находится в режиме HTML5 ... –

он уже начинается с '' –

Добавить Viewbox, который описывает содержание SVG. Затем браузер обеспечит видимость всего эллипса и его штриха. Если вы хотите, чтобы он отображался в 1: 1, вам также нужно будет добавить эквивалентную ширину и высоту.

<svg id="svg1" width="335" height="199" viewBox="-3 -3 335 199"> 
    <ellipse id="oval1" cx="164.041666625656" cy="96.1319444204114" rx="164.041666625656" ry="96.1319444204114" /> 
</svg>

Demo here

источник

2013-11-13 20:10:49

Как исправить усечение верхнего и левого SVG?

ответ

Смежные вопросы