Как повернуть часть SVG элемента с помощью CSS?

176
08 марта 2022, 16:00

Я хочу повернуть только часть SVG.
Например, колеса велосипеда с помощью transform: rotate().
Для этого пробовал использовать transform-origin: 50% 50%, но это не работает. 

.icon-bike-anim, .icon-elephant-anim, .icon-clock-anim { 
  width: 74px; 
  height: 74px; 
} 
.icon .anim-wheel-back, .icon .anim-wheel-front, .icon .anim-ball, .icon .anim-hour, .icon .anim-minute { 
  transform-origin: 50% 50%; 
  animation: turn-wheel 3s linear 1s infinite running; 
}
<svg class="icon icon-bike-anim card-simple__icon" viewBox="0 0 30 32"> 
  <title>bike-2</title> 
  <path fill="#fff" style="fill: var(--color1, #fff)" d="M0 0h30.476v32h-30.476v-32z"></path> 
  <path fill="none" stroke="#3a4161" style="stroke: var(--color2, #3a4161)" stroke-linejoin="round" stroke-linecap="butt" stroke-miterlimit="10" stroke-width="0.5714" d="M11.213 4.361c0-1.481 0.892-2.706 2.388-2.706 1.481 0 2.388 1.21 2.388 2.706-0.955 0.796-2.388 0.796-2.388 0.796s-1.433 0-2.388-0.796z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M15.704 4.336c0 0 0 0 0.285 0.025s0.285 0.025 0.285 0.025l-0 0.001-0 0.003-0.001 0.009c-0.001 0.008-0.002 0.019-0.003 0.033-0.003 0.029-0.008 0.070-0.014 0.122-0.013 0.104-0.035 0.252-0.067 0.43-0.064 0.353-0.172 0.828-0.349 1.307-0.176 0.476-0.426 0.973-0.783 1.355-0.363 0.388-0.842 0.663-1.455 0.663v-0.571c0.422 0 0.758-0.183 1.038-0.482 0.285-0.304 0.502-0.723 0.665-1.163 0.162-0.437 0.262-0.877 0.323-1.211 0.030-0.166 0.050-0.304 0.062-0.4 0.006-0.048 0.010-0.085 0.013-0.11 0.001-0.013 0.002-0.022 0.003-0.028l0.001-0.007 0-0.002z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M10.928 4.386c0-0 0-0 0.285-0.025s0.285-0.025 0.285-0.025l0 0.002 0.001 0.007c0.001 0.006 0.002 0.015 0.003 0.028 0.003 0.025 0.007 0.062 0.013 0.11 0.012 0.096 0.032 0.234 0.062 0.4 0.060 0.333 0.161 0.774 0.323 1.211 0.162 0.44 0.38 0.858 0.665 1.163 0.279 0.299 0.616 0.482 1.038 0.482v0.571c-0.613 0-1.092-0.275-1.455-0.663-0.357-0.382-0.607-0.879-0.783-1.355-0.177-0.478-0.285-0.954-0.349-1.307-0.032-0.177-0.053-0.325-0.067-0.43-0.007-0.052-0.011-0.094-0.014-0.122-0.002-0.014-0.003-0.026-0.003-0.033l-0.001-0.009-0-0.003-0-0.001z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.315 2.291v-0.637h0.571v0.637h-0.571z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.315 4.202v-1.433h0.571v1.433h-0.571z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M15.468 2.367l-0.478 1.751-0.551-0.15 0.478-1.751 0.551 0.15z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M12.284 2.216l0.478 1.751-0.551 0.15-0.478-1.751 0.551-0.15z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M8.857 4.839c0-2.625 2.118-4.743 4.743-4.743s4.743 2.118 4.743 4.743c0 2.197-1.503 4.050-3.532 4.581l-0.973 1.468c-0.053 0.080-0.142 0.128-0.238 0.128s-0.185-0.048-0.238-0.128l-0.973-1.468c-2.028-0.531-3.532-2.384-3.532-4.581zM13.601 0.667c-2.31 0-4.172 1.862-4.172 4.172 0 1.966 1.371 3.62 3.203 4.052 0.071 0.017 0.132 0.060 0.173 0.12l0.797 1.201 0.797-1.201c0.040-0.061 0.102-0.104 0.173-0.12 1.832-0.432 3.203-2.086 3.203-4.052 0-2.31-1.862-4.172-4.172-4.172z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.51 6.319c0.059-0.020 0.122-0.020 0.181 0l1.433 0.478-0.181 0.542-1.342-0.447-1.342 0.447-0.181-0.542 1.433-0.478z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M17.737 17.372c0.002-0.191 0.158-0.344 0.349-0.343 0.598 0.005 2.164 0.011 3.731 0.016 1.535 0.005 3.071 0.010 3.701 0.016 0.191 0.002 0.344 0.158 0.343 0.349s-0.158 0.344-0.349 0.343c-0.606-0.005-2.147-0.010-3.69-0.016-1.581-0.005-3.163-0.011-3.743-0.016-0.191-0.002-0.344-0.158-0.343-0.349z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M10.546 13.823c0.061-0.13 0.193-0.211 0.336-0.207l6.141 0.163c0.152 0.004 0.285 0.103 0.333 0.248l1.068 3.235c0.063 0.189-0.040 0.393-0.23 0.456s-0.393-0.040-0.456-0.23l-0.989-2.994-5.652-0.15-2.592 5.524c-0.085 0.18-0.3 0.258-0.48 0.173s-0.258-0.3-0.173-0.48l2.692-5.738z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M17.121 13.246c0.076 0.285 0.164 0.612 0.291 0.996 0.062 0.189-0.040 0.393-0.23 0.456s-0.393-0.040-0.456-0.23c-0.134-0.405-0.226-0.751-0.303-1.037-0.011-0.043-0.022-0.084-0.033-0.123-0.086-0.318-0.147-0.521-0.223-0.665-0.065-0.125-0.131-0.184-0.229-0.225-0.119-0.049-0.314-0.080-0.661-0.069-0.199 0.006-0.366-0.15-0.372-0.349s0.15-0.366 0.349-0.372c0.378-0.012 0.696 0.015 0.958 0.123 0.282 0.116 0.465 0.311 0.594 0.557 0.119 0.227 0.199 0.51 0.281 0.813 0.011 0.041 0.022 0.083 0.034 0.126z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M18.391 17.219c0.086 0.17 0.018 0.378-0.152 0.465l-5.412 2.745c-0.17 0.086-0.378 0.018-0.465-0.152s-0.018-0.378 0.152-0.465l5.412-2.745c0.17-0.086 0.378-0.018 0.465 0.152z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M10.724 13.627c0.183-0.055 0.376 0.049 0.43 0.232l1.847 6.162c0.055 0.183-0.049 0.376-0.232 0.43s-0.376-0.049-0.43-0.232l-1.847-6.162c-0.055-0.183 0.049-0.376 0.232-0.43z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M8.212 19.37l4.49 0.406-0.062 0.689-4.49-0.406 0.062-0.689z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M21.005 17.11c0.18-0.063 0.378 0.031 0.441 0.211l1.1 3.127c0.063 0.18-0.031 0.378-0.211 0.441s-0.378-0.031-0.441-0.211l-1.1-3.127c-0.063-0.18 0.031-0.378 0.211-0.441z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M9.408 10.787c0.144-0.064 0.313 0.001 0.377 0.145l1.524 3.429c0.064 0.144-0.001 0.313-0.145 0.377s-0.313-0.001-0.377-0.145l-1.524-3.429c-0.064-0.144 0.001-0.313 0.145-0.377z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M11.338 11.072c-0.001 0.158-0.129 0.285-0.287 0.285l-2.731-0.010c-0.158-0.001-0.285-0.129-0.285-0.287s0.129-0.285 0.287-0.285l2.731 0.010c0.158 0.001 0.285 0.129 0.285 0.287z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M-2.286 17.778h8.381v0.645h-8.381v-0.645z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M0.293 19.39h5.802v0.645h-5.802v-0.645z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M3.839 21.001h2.256v0.645h-2.256v-0.645z"></path> 
  <path class="anim-wheel-back" fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M5.631 18.362l2.178 1.258-2.207 1.274c-0.174-0.375-0.272-0.794-0.272-1.236 0-0.465 0.108-0.905 0.3-1.296zM5.822 18.031c0.48-0.721 1.271-1.215 2.178-1.29v2.547l-2.178-1.258zM8.381 19.949l2.288 1.321c-0.497 0.754-1.333 1.263-2.288 1.309v-2.63zM10.857 20.939l-2.286-1.32 2.256-1.303c0.206 0.401 0.323 0.857 0.323 1.341 0 0.46-0.106 0.895-0.293 1.282zM8 22.572c-0.931-0.077-1.738-0.594-2.214-1.345l2.214-1.278v2.623zM8.381 16.735c0.932 0.044 1.75 0.53 2.251 1.254l-2.251 1.3v-2.554zM8.241 16.011c-2.007 0-3.631 1.634-3.631 3.646s1.624 3.646 3.631 3.646c2.007 0 3.631-1.634 3.631-3.646s-1.624-3.646-3.631-3.646z"></path> 
  <path class="anim-wheel-front" fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M20.326 19.522l1.489 0.86-1.388 0.801c-0.152-0.279-0.239-0.599-0.239-0.939 0-0.255 0.049-0.499 0.137-0.722zM20.439 19.285c0.305-0.542 0.859-0.924 1.507-0.991v1.861l-1.507-0.87zM22.208 20.609l1.477 0.853c-0.348 0.438-0.879 0.724-1.477 0.742v-1.595zM23.834 21.246l-1.495-0.863 1.605-0.927c0.106 0.241 0.165 0.508 0.165 0.789 0 0.366-0.1 0.708-0.275 1.001zM21.947 22.194c-0.565-0.058-1.059-0.356-1.378-0.79l1.378-0.795v1.585zM22.208 18.285c0.684 0.020 1.28 0.391 1.614 0.938l-1.614 0.932v-1.87zM22.149 17.524c-1.503 0-2.721 1.218-2.721 2.721s1.218 2.721 2.721 2.721c1.503 0 2.721-1.218 2.721-2.721s-1.218-2.721-2.721-2.721z"></path> 
</svg>

С помощью этого кода колеса вращаются относительно оси SVG, а не сами по себе.

Не могли бы вы мне помочь ?

Оригинал иконки велосипеда:

Попытка повернуть колеса велосипеда, но иконка поворачивается целиком:

Answer 1

Перевод ответа @Paulie_D на вопрос EnSO: How to rotate a part of SVG on itself with CSS?

transform-origin в SVG относится к центру SVG, а не к вложенному элементу (такому как path).

Тем не менее, вы можете использовать CSS, чтобы «переопределить» то, как вы хотите, чтобы преобразование применялось, используя transform-box, для конкретной части элемента и определить при этом его собственный центр.

transform-box:fill-box;

CSS-свойство transform-box определяет часть макета, к которому относятся свойства transform и transform-origin. MDN 

.icon-bike-anim, 
.icon-elephant-anim, 
.icon-clock-anim { 
  width: 274px; 
  height: 274px; 
} 
 
.icon .anim-wheel-back, 
.icon .anim-wheel-front, 
.icon .anim-ball, 
.icon .anim-hour, 
.icon .anim-minute { 
  transform-origin: 50% 50%; 
  transform-box: fill-box; 
  animation: turn-wheel 3s linear 1s infinite running; 
} 
 
@keyframes turn-wheel { 
  100% { 
    transform: rotate(1turn) 
  } 
  ; 
}
<svg class="icon icon-bike-anim card-simple__icon" viewBox="0 0 30 32"> 
  <title>bike-2</title> 
  <path fill="#fff" style="fill: var(--color1, #fff)" d="M0 0h30.476v32h-30.476v-32z"></path> 
  <path fill="none" stroke="#3a4161" style="stroke: var(--color2, #3a4161)" stroke-linejoin="round" stroke-linecap="butt" stroke-miterlimit="10" stroke-width="0.5714" d="M11.213 4.361c0-1.481 0.892-2.706 2.388-2.706 1.481 0 2.388 1.21 2.388 2.706-0.955 0.796-2.388 0.796-2.388 0.796s-1.433 0-2.388-0.796z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M15.704 4.336c0 0 0 0 0.285 0.025s0.285 0.025 0.285 0.025l-0 0.001-0 0.003-0.001 0.009c-0.001 0.008-0.002 0.019-0.003 0.033-0.003 0.029-0.008 0.070-0.014 0.122-0.013 0.104-0.035 0.252-0.067 0.43-0.064 0.353-0.172 0.828-0.349 1.307-0.176 0.476-0.426 0.973-0.783 1.355-0.363 0.388-0.842 0.663-1.455 0.663v-0.571c0.422 0 0.758-0.183 1.038-0.482 0.285-0.304 0.502-0.723 0.665-1.163 0.162-0.437 0.262-0.877 0.323-1.211 0.030-0.166 0.050-0.304 0.062-0.4 0.006-0.048 0.010-0.085 0.013-0.11 0.001-0.013 0.002-0.022 0.003-0.028l0.001-0.007 0-0.002z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M10.928 4.386c0-0 0-0 0.285-0.025s0.285-0.025 0.285-0.025l0 0.002 0.001 0.007c0.001 0.006 0.002 0.015 0.003 0.028 0.003 0.025 0.007 0.062 0.013 0.11 0.012 0.096 0.032 0.234 0.062 0.4 0.060 0.333 0.161 0.774 0.323 1.211 0.162 0.44 0.38 0.858 0.665 1.163 0.279 0.299 0.616 0.482 1.038 0.482v0.571c-0.613 0-1.092-0.275-1.455-0.663-0.357-0.382-0.607-0.879-0.783-1.355-0.177-0.478-0.285-0.954-0.349-1.307-0.032-0.177-0.053-0.325-0.067-0.43-0.007-0.052-0.011-0.094-0.014-0.122-0.002-0.014-0.003-0.026-0.003-0.033l-0.001-0.009-0-0.003-0-0.001z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.315 2.291v-0.637h0.571v0.637h-0.571z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.315 4.202v-1.433h0.571v1.433h-0.571z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M15.468 2.367l-0.478 1.751-0.551-0.15 0.478-1.751 0.551 0.15z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M12.284 2.216l0.478 1.751-0.551 0.15-0.478-1.751 0.551-0.15z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M8.857 4.839c0-2.625 2.118-4.743 4.743-4.743s4.743 2.118 4.743 4.743c0 2.197-1.503 4.050-3.532 4.581l-0.973 1.468c-0.053 0.080-0.142 0.128-0.238 0.128s-0.185-0.048-0.238-0.128l-0.973-1.468c-2.028-0.531-3.532-2.384-3.532-4.581zM13.601 0.667c-2.31 0-4.172 1.862-4.172 4.172 0 1.966 1.371 3.62 3.203 4.052 0.071 0.017 0.132 0.060 0.173 0.12l0.797 1.201 0.797-1.201c0.040-0.061 0.102-0.104 0.173-0.12 1.832-0.432 3.203-2.086 3.203-4.052 0-2.31-1.862-4.172-4.172-4.172z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M13.51 6.319c0.059-0.020 0.122-0.020 0.181 0l1.433 0.478-0.181 0.542-1.342-0.447-1.342 0.447-0.181-0.542 1.433-0.478z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M17.737 17.372c0.002-0.191 0.158-0.344 0.349-0.343 0.598 0.005 2.164 0.011 3.731 0.016 1.535 0.005 3.071 0.010 3.701 0.016 0.191 0.002 0.344 0.158 0.343 0.349s-0.158 0.344-0.349 0.343c-0.606-0.005-2.147-0.010-3.69-0.016-1.581-0.005-3.163-0.011-3.743-0.016-0.191-0.002-0.344-0.158-0.343-0.349z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M10.546 13.823c0.061-0.13 0.193-0.211 0.336-0.207l6.141 0.163c0.152 0.004 0.285 0.103 0.333 0.248l1.068 3.235c0.063 0.189-0.040 0.393-0.23 0.456s-0.393-0.040-0.456-0.23l-0.989-2.994-5.652-0.15-2.592 5.524c-0.085 0.18-0.3 0.258-0.48 0.173s-0.258-0.3-0.173-0.48l2.692-5.738z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M17.121 13.246c0.076 0.285 0.164 0.612 0.291 0.996 0.062 0.189-0.040 0.393-0.23 0.456s-0.393-0.040-0.456-0.23c-0.134-0.405-0.226-0.751-0.303-1.037-0.011-0.043-0.022-0.084-0.033-0.123-0.086-0.318-0.147-0.521-0.223-0.665-0.065-0.125-0.131-0.184-0.229-0.225-0.119-0.049-0.314-0.080-0.661-0.069-0.199 0.006-0.366-0.15-0.372-0.349s0.15-0.366 0.349-0.372c0.378-0.012 0.696 0.015 0.958 0.123 0.282 0.116 0.465 0.311 0.594 0.557 0.119 0.227 0.199 0.51 0.281 0.813 0.011 0.041 0.022 0.083 0.034 0.126z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M18.391 17.219c0.086 0.17 0.018 0.378-0.152 0.465l-5.412 2.745c-0.17 0.086-0.378 0.018-0.465-0.152s-0.018-0.378 0.152-0.465l5.412-2.745c0.17-0.086 0.378-0.018 0.465 0.152z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M10.724 13.627c0.183-0.055 0.376 0.049 0.43 0.232l1.847 6.162c0.055 0.183-0.049 0.376-0.232 0.43s-0.376-0.049-0.43-0.232l-1.847-6.162c-0.055-0.183 0.049-0.376 0.232-0.43z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M8.212 19.37l4.49 0.406-0.062 0.689-4.49-0.406 0.062-0.689z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M21.005 17.11c0.18-0.063 0.378 0.031 0.441 0.211l1.1 3.127c0.063 0.18-0.031 0.378-0.211 0.441s-0.378-0.031-0.441-0.211l-1.1-3.127c-0.063-0.18 0.031-0.378 0.211-0.441z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M9.408 10.787c0.144-0.064 0.313 0.001 0.377 0.145l1.524 3.429c0.064 0.144-0.001 0.313-0.145 0.377s-0.313-0.001-0.377-0.145l-1.524-3.429c-0.064-0.144 0.001-0.313 0.145-0.377z"></path> 
  <path fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M11.338 11.072c-0.001 0.158-0.129 0.285-0.287 0.285l-2.731-0.010c-0.158-0.001-0.285-0.129-0.285-0.287s0.129-0.285 0.287-0.285l2.731 0.010c0.158 0.001 0.285 0.129 0.285 0.287z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M-2.286 17.778h8.381v0.645h-8.381v-0.645z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M0.293 19.39h5.802v0.645h-5.802v-0.645z"></path> 
  <path fill="#3a4161" style="fill: var(--color2, #3a4161)" d="M3.839 21.001h2.256v0.645h-2.256v-0.645z"></path> 
  <path class="anim-wheel-back" fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M5.631 18.362l2.178 1.258-2.207 1.274c-0.174-0.375-0.272-0.794-0.272-1.236 0-0.465 0.108-0.905 0.3-1.296zM5.822 18.031c0.48-0.721 1.271-1.215 2.178-1.29v2.547l-2.178-1.258zM8.381 19.949l2.288 1.321c-0.497 0.754-1.333 1.263-2.288 1.309v-2.63zM10.857 20.939l-2.286-1.32 2.256-1.303c0.206 0.401 0.323 0.857 0.323 1.341 0 0.46-0.106 0.895-0.293 1.282zM8 22.572c-0.931-0.077-1.738-0.594-2.214-1.345l2.214-1.278v2.623zM8.381 16.735c0.932 0.044 1.75 0.53 2.251 1.254l-2.251 1.3v-2.554zM8.241 16.011c-2.007 0-3.631 1.634-3.631 3.646s1.624 3.646 3.631 3.646c2.007 0 3.631-1.634 3.631-3.646s-1.624-3.646-3.631-3.646z"></path> 
  <path class="anim-wheel-front" fill="#e850aa" style="fill: var(--color3, #e850aa)" d="M20.326 19.522l1.489 0.86-1.388 0.801c-0.152-0.279-0.239-0.599-0.239-0.939 0-0.255 0.049-0.499 0.137-0.722zM20.439 19.285c0.305-0.542 0.859-0.924 1.507-0.991v1.861l-1.507-0.87zM22.208 20.609l1.477 0.853c-0.348 0.438-0.879 0.724-1.477 0.742v-1.595zM23.834 21.246l-1.495-0.863 1.605-0.927c0.106 0.241 0.165 0.508 0.165 0.789 0 0.366-0.1 0.708-0.275 1.001zM21.947 22.194c-0.565-0.058-1.059-0.356-1.378-0.79l1.378-0.795v1.585zM22.208 18.285c0.684 0.020 1.28 0.391 1.614 0.938l-1.614 0.932v-1.87zM22.149 17.524c-1.503 0-2.721 1.218-2.721 2.721s1.218 2.721 2.721 2.721c1.503 0 2.721-1.218 2.721-2.721s-1.218-2.721-2.721-2.721z"></path> 
</svg>

Источник: @Paulie_D

READ ALSO
Проблема с отступами css
CSS

Проблема с отступами css

В одном браузере вид чата вот такой: картинка #1Хотя должен быть как на картинке #2

 136
задание параметров в метод
PHP

задание параметров в метод

существует метод со своими условиями

 159
Отправить POST из js в php
PHP

Отправить POST из js в php

Не понимаю в чём проблемаЗадача такая: Нужно отправить из js данные в php и вывести их

 87
вызывать определенный массив из метода
PHP

вызывать определенный массив из метода

Есть функция валидации полей, для каждого поля свое правило в массивах, как эти массивы определить к примеру в метод rules и с него потом доставать...

 108