Как увеличить обводку вне пути svg без использования paint-order="stroke"?

Я столкнулся с проблемой при увеличении ширины штриха. Когда я использую атрибут paint-order="stroke", это не соответствует моему требованию, потому что ширина штриха увеличивается с обеих сторон (внутри и снаружи). Пожалуйста, посмотрите на прикрепленные изображения.

оригинальный свг: -

Фактический SVG: -

Ожидаемый svg (что является моим требованием): -

Код :-

 <html>
    <body>
    
    <svg height = "300" width = "500">
      <circle cx = "50" cy = "50" r = "40" stroke = "black" stroke-width = "20" paint-order = "stroke" fill = "red" />
      
      <circle cx = "152" cy = "50" r = "40" stroke = "black" stroke-width = "20" paint-order = "stroke" fill = "none" />
      
      <circle cx = "252" cy = "50" r = "40" stroke = "black" stroke-width = "10" paint-order = "stroke" fill = "none" />
      
    </svg> 
     
    </body>
</html>

сделайте круг больше, а затем вы можете использовать ширину штриха, которую вы хотите/нужно.

— 10.12.2020 15:55

javascript svg path geometry

10.12.2020 15:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

365

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Штрих шириной 20px круга симметрично расположен по обе стороны от центральной линии. 10px снаружи, 10 пикселей внутри круга

Круг вверху имеет меньший радиус, равный половине хода нижнего круга 40 - 10 = 30px

Поэтому внутренняя часть обводки нижнего, большего круга будет скрыта. Будет видна только внешняя часть большого круга.

<html>
    <body>
    
    <svg height = "300" width = "500">
            
          <!-- Sample circle without overlap      -->
     <circle cx = "52" cy = "50" r = "40" stroke = "black" stroke-width = "20" paint-order = "stroke" fill = "none" /> >
      
      <circle cx = "152" cy = "50" r = "40" stroke = "blue" stroke-width = "20" paint-order = "stroke" fill = "none" />
          <!-- The circle at the top has a smaller radius equal to half the stroke of the lower circle    -->
     <circle cx = "152" cy = "50" r = "30" stroke = "white" stroke-width = "20" paint-order = "stroke" fill = "none" />
      
    </svg> 
     
    </body>
</html>

Да, для круга это будет работать, но какое будет решение, если svg содержит путь вместо круга

— 10.12.2020 20:23

@karmarout Вы привели пример с кругами в вопросе. Было бы неплохо принять этот вопрос и задать новый вопрос с путем

— 10.12.2020 20:28

10.12.2020 19:08