Блог

Главная - Вопросы по программированию - Как я могу указать толщину линий повторно используемых элементов в документе SVG?

Как я могу указать толщину линий повторно используемых элементов в документе SVG?

#svg #graphics

#svg #графика

Вопрос:

У меня есть документ SVG, который содержит масштабированную группу, которая определена в <defs>...</defs> разделе.

 <defs>
    <clipPath id="pADC3" >
        <rect x="-3142" y="1328" width="10411" height="6610" />
    </clipPath>
  <g id=model">
    <line id="i22" class="ELECTRICAL" x1="-3142" y1="-1328" x2="7269" y2="7938" stroke="magenta"/>
    <rect x="-3142" y="1328" width="10411" height="6610" fill="none" stroke="red"/>
    ...
  </g>
</defs>

Если я масштабирую эту определенную группу и помещаю ее в документ:

 <use id="iADC3" class="lVPORT" href="#model" transform="translate(171 108) scale(0.050000)" clip-path="url(#pADC3)" />

… он не отображается.

Если я увеличу толщину линии (ширину обводки) до 50, линии будут отображаться только тогда.

Кроме того, все линии, нарисованные в остальной части документа, имеют разную толщину.

Есть ли способ определить толщину линии для масштабируемой группы?

Комментарии:

1. Если вы масштабируете линию на 0,05, то вы делаете ее довольно тонкой, поэтому вам нужно, чтобы ширина обводки была большой, чтобы противостоять этому. 0,05 x 50 = 2,5. Вы можете использовать vector-effects=»non-scaling-stroke», если вы не хотите, чтобы ширина обводки уменьшалась.масштабирование вообще.

2. Это звучит как идеальное решение. К сожалению, я не могу заставить его работать. Куда идет директива векторных эффектов? Я пытался поместить это в <g vector-effect="non-scaling-stroke"> и в <path> элемент, но ни Firefox, ни Chrome не показывают никакой разницы.

3. developer.mozilla.org/en-US/docs/Web/SVG/Attribute/…

4. Обратите внимание, что vector-effect не является наследуемым свойством, поэтому, если вы установите для него значение <g>, вам придется явно установить для всех дочерних элементов значение vector-effect=»inherit» (или сделать это с помощью CSS)

5. Спасибо за вашу помощь. Хотя средство проверки синтаксиса на validator.w3.org/nu сообщает об ошибках: Attribute vector-effect not allowed on SVG element g at this point. <g id="model" vector-effect="non-scaling-stroke" stroke-width="50"> . Ему также не нравится атрибут в <line> теге или в <path> теге.