Блог

Главная - Вопросы по программированию - Попытка НЕ изменять радиус из этой формы SVG

Попытка НЕ изменять радиус из этой формы SVG

#svg

#svg

Вопрос:

Может кто-нибудь увидеть, где я могу изменить эту форму, чтобы она имела НУЛЕВОЙ радиус, то есть углы 90 градусов?

Спасибо

 <path d="M927.22046,148H272.77954C194.80078,148,131,211.80078,131,289.77954V610.22046C131,688.19922,194.80078,752,272.77954,752H480.20166l-2.67651-12.6015s-6.88465-44.42706,0-79.06513a260.02987,260.02987,0,0,0,4.56689-32.92883,198.37786,198.37786,0,0,1,6.09692-36.97235c.18189-.69885.38648-1.39142.57642-2.08807-1.67895-.45655-2.45044-.8216-2.06055-1.05194,1.07581-.63532,1.66748-2.58112,1.96216-5.04993a241.71787,241.71787,0,0,1,10.43714-48.09491c-6.95667,4.36725-11.57557,4.83105-14.59937,3.13873-10.62549-2.90161-6.21448-26.8-6.21448-26.8s6.60327-51.68982,8.79712-70.4057c1.261-10.758,17.41944-16.85406,31.72315-20.16418,1.5072-3.23291,2.59277-6.48981,1.90356-9.9076-.04639-.23016-.11316-.45275-.17419-.67749-1.81861-4.03955-5.51575-7.36315-6.90308-11.54632a12.18233,12.18233,0,0,1-1.28332-3.60291c-1.22864-7.17205,5.47766-13.36755,7.41125-20.26538a16.69517,16.69517,0,0,1-4.28821-6.87622c-2.94665-6.04345-1.51-13.2973,7.95215-18.89782,1.88892-1.118,3.89063-2.105,5.92383-3.0517a9.21442,9.21442,0,0,1,2.40539-1.10291c6.77015-3.06244,13.5752-6.02569,17.62684-11.988,1.04345-1.53553,1.95861-3.31684,3.64672-4.12409a7.035,7.035,0,0,1,2.51123-.56219c13.04541-1.00147,24.85755,10.18548,37.8407,8.58221,3.93311-.48572,7.94812-2.1391,11.72327-.949,2.481.782,4.41675,2.68756,6.08411,4.65777a48.00543,48.00543,0,0,1,10.4104,39.52942c-1.64637,8.55286-5.64942,17.36847-2.76477,25.59747,2.11962,6.04639,7.79419,10.95362,7.83459,17.34974.03333,5.26312-3.70276,9.46264-7.31238,13.55786q.70386.72006,1.37232,1.47906c8.8208,10.05036,7.154,18.62787,5.91,22.06238l.00037.00171L622.105,502.956,618.28,532.32306s-.9458,12.052-9.85413,14.69531c-2.59546,1.20026-5.995,1.51673-10.46362.15668-2.89978-.88251-5.34314-1.76441-7.41711-2.62177,1.96008,6.25965,5.33361,19.03992,4.78576,31.44385-.765,17.319,1.52991,18.82507,1.52991,18.82507a3.10136,3.10136,0,0,1-.48657.481c9.08679,20.07605,9.17016,40.674-.27832,61.26514-10.70972,23.343.76489,77.55914.76489,77.55914s.81677,8.45716,1.184,17.8725h164.288c-2.613-24.92285-5.75225-49.87347-7.14654-52.66205-2.29883-4.59778.62018-80.34527,1.70966-106.65588-.4842-.12256-.95728-.247-1.4032-.37506-.77643-.22284-1.4748-.45514-2.11988-.69251a15.45326,15.45326,0,0,0,.4209,3.97894c.967,2.25629-1.35217,3.91468-5.29291,5.04633,2.2923,11.18591,5.12342,32.00073-4.45489,36.03369-9.85278,4.14856-10.05005-21.05182-9.509-34.18731-1.24256.046-2.48889.07006-3.72022.07006-11.83661,0,3.48139-137.16558,2.78522-146.2171-.69635-9.05157,5.57007-45.954,5.57007-45.954s2.08887-7.65893,8.35528-9.05151,36.20612-18.79932,36.20612-18.79932A22.3618,22.3618,0,0,1,790,376.60175v-1.03016a22.965,22.965,0,0,1,2.48486-2.01117c-.36523-6.0838-1.18823-13.93237-1.78827-19.2351a24.30179,24.30179,0,0,1-6.53277-12.50012,38.36854,38.36854,0,0,1-3.64581-3.2392,18.9959,18.9959,0,0,1-4.66974-11.85571,37.46427,37.46427,0,0,1,1.85681-12.79975,15.32366,15.32366,0,0,1,1.613-3.90857,14.14546,14.14546,0,0,1,3.64532-3.61389c.42279-.31354.85931-.60712,1.29443-.90289a12.19435,12.19435,0,0,1,3.93964-4.47168c3.55389-2.33313,8.12689-2.14258,12.37665-2.03662.06286.00158.12805.00116.19226.00158q1.18222-.19025,2.37317-.31469a2.434,2.434,0,0,0,1.90381-1.86481q.86288.82891,1.72564,1.65778,1.29483-.01869,2.58808.04437A18.48927,18.48927,0,0,1,810.69855,296q.47315,1.34911.946,2.6983c.86609.09217,1.729.20832,2.58753.35749q1.015-.80667,2.03033-1.61329c.15021-.11938.689,1.64283.96076,2.2475.46575.11963.93042.24677,1.3905.38928.71936-.03277,1.51849-.16754,1.96271-.16015a13.1291,13.1291,0,0,1,6.997,1.74457,15.02664,15.02664,0,0,1,4.44744,5.13324,33.25231,33.25231,0,0,1,4.96412,14.32153,16.59989,16.59989,0,0,1,2.75415,6.15454c1.14947,6.98944-5.49286,12.8302-6.80927,19.79022-.70215,3.71326.09943,7.82538-1.792,11.097a11.58824,11.58824,0,0,1-3.18958,3.34417,24.06659,24.06659,0,0,1-2.35724,1.55231,60.5159,60.5159,0,0,0,1.441,12.51489l.89576,3.435c1.39306,1.00434,2.89544,2.16522,4.54467,3.52771,0,0,19.49561,8.35523,26.45832,12.5329,6.121,3.67261,12.77588,4.12079,14.76935,8.90521l.54852.1463s6.96277,77.2862,7.65906,90.51532,9.05151,94.69294,7.65911,98.17432c-.5155,1.28845-3.79895,2.767-7.76355,3.94281,2.31373,10.5744,6.049,33.57153-4.07324,37.8335-10.26147,4.32067-10.04962-23.19294-9.43835-35.75623-1.36853-.12366-2.26538-.48187-2.39813-1.14618-.11329-.56567-.47632-3.12237-1.00092-7.02032-.86713.13525-1.76666.27435-2.7243.41967-.19239.02906-.39478.05909-.5904.0885,8.82776,27.76832-10.7232,101.41157-14.48376,115.82679-1.965,7.53259-4.08405,26.15661-5.99487,45.00311h86.12109C1005.19922,752,1069,688.19922,1069,610.22046V289.77954C1069,211.80078,1005.19922,148,927.22046,148Z" transform="translate(-131 -148)" fill="#f2f2f2"></path>

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

1. Почему бы просто не нарисовать нужную фигуру в редакторе SVG, таком как Inkscape, а затем использовать это?

Ответ №1:

Вот как я бы это сделал:

  1. Сначала мне нужно, чтобы путь был абсолютным. Это необходимо, если вам нужно что-то изменить. Чтобы получить путь к all.absolute, я использую Convert SVG path для all-relative или all-absolute

  2. Затем я определяю части пути для женщины и для мужчины и разделяю эти части как пути.

  3. Я создаю маску с белым прямоугольником и черными мужчиной и женщиной.

  4. Я добавляю прямоугольник со скругленными углами и маскирую этот прямоугольник предыдущей маской.

<прямоугольник x = «131» y = «148» ширина = «938» высота = «604» rx = «50» ry =»50″ маска =»url (#people)» заливка =»синий» />

Пожалуйста, измените rx и ry атрибуты этого прямоугольника, чтобы изменить округлость углов. Удалите эти 2 атрибута для прямоугольника без закругленных углов.

 body{background:lightBlue}

svg{width:300px;}  
 <svg viewBox="131 148 938 604" >
<rect x="131" y="148" width="938" height="604" rx="50" ry="50" mask="url(#people)" fill="blue"/>
<defs>  
<mask id="people"> 
  <rect x="131" y="148" width="938" height="604" fill="white" />
  <path id="mujer" fill="black" d="M477.52515,752S470.6405,694.97144,477.52515,660.3333700000001A260.02987,260.02987,0,0,0,482.09204,627.4045400000001A198.37786,198.37786,0,0,1,488.18896,590.4321900000001C488.37085,589.7333400000001,488.57544,589.0407700000001,488.76538,588.3441200000001C487.08643,587.8875700000001,486.31494,587.5225200000001,486.70483,587.2921800000001C487.78064,586.6568600000002,488.37231,584.7110600000001,488.66699,582.2422500000001A241.71787,241.71787,0,0,1,499.10413,534.1473400000001C492.14746,538.5145900000001,487.52855999999997,538.9783900000001,484.50476,537.2860700000001C473.87926999999996,534.3844600000001,478.29028,510.4860700000001,478.29028,510.4860700000001S484.89355,458.7962500000001,487.0874,440.08037000000013C488.3484,429.32237000000015,504.50684,423.2263100000001,518.81055,419.91619000000014C520.31775,416.68328000000014,521.40332,413.42638000000017,520.71411,410.00859000000014C520.66772,409.7784300000001,520.60095,409.55584000000016,520.53992,409.33110000000016C518.72131,405.29155000000014,515.02417,401.96795000000014,513.63684,397.7847800000002A12.18233,12.18233,0,0,1,512.35352,394.1818700000002C511.12488,387.00982000000016,517.83118,380.8143200000002,519.76477,373.9164900000002A16.69517,16.69517,0,0,1,515.47656,367.0402700000002C512.52991,360.9968200000002,513.96656,353.7429700000002,523.4287099999999,348.14245000000017C525.3176299999999,347.0244500000002,527.3193399999999,346.03745000000015,529.3525399999999,345.0907500000002A9.21442,9.21442,0,0,1,531.7579299999999,343.9878400000002C538.5280799999998,340.9254000000002,545.3331299999999,337.9621500000002,549.3847699999999,331.9998400000002C550.4282199999999,330.4643100000002,551.3433799999999,328.68300000000016,553.0314899999998,327.87575000000015A7.035,7.035,0,0,1,555.5427199999998,327.31356000000017C568.5881299999998,326.3120900000002,580.4002699999998,337.49904000000015,593.3834199999998,335.89577000000014C597.3165299999998,335.4100500000001,601.3315399999998,333.75667000000016,605.1066899999997,334.94677000000013C607.5876899999997,335.7287700000001,609.5234399999997,337.63433000000015,611.1907999999997,339.60454000000016A48.00543,48.00543,0,0,1,621.6011999999997,379.1339600000002C619.9548299999997,387.6868200000002,615.9517799999998,396.5024300000002,618.8364299999997,404.73143000000016C620.9560499999998,410.77782000000013,626.6306199999997,415.68505000000016,626.6710199999998,422.08117000000016C626.7043499999997,427.34429000000017,622.9682599999998,431.5438100000002,619.3586399999998,435.63903000000016Q620.0624999999998,436.35909000000015,620.7309599999998,437.11809000000017C629.5517599999997,447.1684500000002,627.8849599999998,455.7459600000002,626.6409599999997,459.1804700000002L626.6413299999997,459.1821800000002L622.105,502.956L618.28,532.32306S617.3342,544.3750600000001,608.4258699999999,547.01837C605.8304099999999,548.21863,602.4308699999999,548.5351,597.9622499999999,547.17505C595.06247,546.29254,592.61911,545.4106400000001,590.54514,544.5532800000001C592.5052199999999,550.81293,595.87875,563.5932000000001,595.3308999999999,575.9971300000001C594.5658999999999,593.31613,596.8608099999999,594.8222000000001,596.8608099999999,594.8222000000001A3.10136,3.10136,0,0,1,596.3742399999999,595.3032000000001C605.4610299999998,615.3792500000001,605.5443999999999,635.9772,596.0959199999999,656.56834C585.3861999999999,679.91134,596.8608099999999,734.12748,596.8608099999999,734.12748S597.6775799999999,742.58464,598.0448099999999,751.9999799999999"/>
<path id="hombre" fill="black" d="M762.3328099999999,751.9999799999999C759.7198099999998,727.0771299999999,756.5805599999999,702.1265099999999,755.1862699999999,699.3379299999999C752.88744,694.7401499999999,755.8064499999999,618.9926599999999,756.8959299999999,592.6820499999999C756.4117299999999,592.5594899999999,755.9386499999999,592.4350499999999,755.4927299999999,592.3069899999999C754.7162999999999,592.0841499999999,754.01793,591.8518499999999,753.37285,591.61448A15.45326,15.45326,0,0,0,753.7937499999999,595.5934199999999C754.7607499999999,597.84971,752.4415799999999,599.5080999999999,748.5008399999999,600.6397499999999C750.7931399999999,611.82566,753.6242599999999,632.6404799999999,744.04595,636.6734399999999C734.1931699999999,640.8219999999999,733.9958999999999,615.6216199999999,734.5369499999999,602.4861299999999C733.2943899999999,602.5321299999999,732.04806,602.5561899999999,730.8167299999999,602.5561899999999C718.9801199999999,602.5561899999999,734.2981199999999,465.3906099999999,733.6019499999999,456.33908999999994C732.9055999999998,447.2875199999999,739.1720199999999,410.38508999999993,739.1720199999999,410.38508999999993S741.2608899999999,402.72615999999994,747.5272999999999,401.3335799999999S783.7334199999998,382.5342599999999,783.7334199999998,382.5342599999999A22.3618,22.3618,0,0,1,790,376.60175V375.57158999999996A22.965,22.965,0,0,1,792.48486,373.56041999999997C792.11963,367.47661999999997,791.29663,359.62805,790.69659,354.32532A24.30179,24.30179,0,0,1,784.16382,341.8252A38.36854,38.36854,0,0,1,780.51801,338.586A18.9959,18.9959,0,0,1,775.84827,326.73029A37.46427,37.46427,0,0,1,777.70508,313.93054A15.32366,15.32366,0,0,1,779.31808,310.02197A14.14546,14.14546,0,0,1,782.9634,306.40808C783.3861899999999,306.09454,783.82271,305.80096,784.25783,305.50518999999997A12.19435,12.19435,0,0,1,788.1974700000001,301.03351C791.7513600000001,298.70038,796.3243600000001,298.89092999999997,800.5741200000001,298.99688999999995C800.6369800000001,298.99846999999994,800.7021700000001,298.99805,800.7663800000001,298.99846999999994Q801.9486000000002,298.80821999999995,803.1395500000001,298.68377999999996A2.434,2.434,0,0,0,805.0433600000001,296.81897Q805.9062400000001,297.64788,806.7690000000001,298.47675Q808.0638300000002,298.45806,809.3570800000001,298.52112A18.48927,18.48927,0,0,1,810.69855,296Q811.1717,297.34911,811.64455,298.6983C812.51064,298.79047,813.37355,298.90662000000003,814.23208,299.05579Q815.24708,298.24912,816.26241,297.4425C816.4126200000001,297.32312,816.95141,299.08533,817.2231700000001,299.69C817.68892,299.80962999999997,818.1535900000001,299.93677,818.6136700000001,300.07928C819.3330300000001,300.04650999999996,820.1321600000001,299.91174,820.5763800000001,299.91913A13.1291,13.1291,0,0,1,827.57338,301.6637A15.02664,15.02664,0,0,1,832.0208200000001,306.79694A33.25231,33.25231,0,0,1,836.98494,321.11847A16.59989,16.59989,0,0,1,839.73909,327.27301C840.88856,334.26245,834.2462300000001,340.10321,832.9298200000001,347.06323C832.2276700000001,350.77648999999997,833.02925,354.88860999999997,831.13782,358.16022999999996A11.58824,11.58824,0,0,1,827.94824,361.5044A24.06659,24.06659,0,0,1,825.591,363.05670999999995A60.5159,60.5159,0,0,0,827.032,375.57159999999993L827.92776,379.00659999999993C829.32082,380.01093999999995,830.8232,381.1718199999999,832.47243,382.53430999999995C832.47243,382.53430999999995,851.96804,390.88953999999995,858.93075,395.06720999999993C865.05175,398.73981999999995,871.70663,399.18799999999993,873.7001,403.97241999999994L874.2486200000001,404.11871999999994S881.21139,481.40491999999995,881.90768,494.6340399999999S890.95919,589.3269799999999,889.5667900000001,592.8083599999999C889.0512900000001,594.0968099999999,885.7678400000001,595.5753599999999,881.8032400000001,596.7511699999999C884.11697,607.3255699999999,887.85224,630.3226999999999,877.73,634.5846699999998C867.46853,638.9053399999998,867.68038,611.3917299999998,868.29165,598.8284399999999C866.92312,598.7047799999999,866.02627,598.3465699999999,865.89352,597.6822599999999C865.78023,597.11659,865.4172,594.5598899999999,864.8926,590.66194C864.02547,590.79719,863.12594,590.93629,862.1683,591.08161C861.97591,591.1106699999999,861.7735200000001,591.1406999999999,861.5779,591.1701099999999C870.40566,618.9384299999999,850.8547,692.5816799999999,847.09414,706.9968999999999C845.12914,714.5294899999999,843.01009,733.1535099999999,841.09927,752.0000099999999"/>
  </mask>
  </defs>  
  </svg>