Как изменить параметры svg с помощью Jquery?

242
22 сентября 2021, 02:50

Можно ли сделать так, что бы при определенных условиях подключенный svg файл поворачивался на 90 градусов с помощью Jquery? Svg подключен через object. Я пытался поменять значение таким способом: $(window).scroll(function(){

    $('.g1').css({ 'transform': 'rotate(140deg)' });
}); 

Svg в html добавлен так

<object id="obj3" type="image/svg+xml" data="img/robot.svg"></object>

Код svg

<svg width="228" height="217" viewBox="0 0 228 217" fill="none" xmlns="http://www.w3.org/2000/svg"> 
<path d="M209.585 96.2777L228 86L209.585 75.7223C204.411 33.1002 167.885 0 123.597 0C75.809 0 37.0002 38.5413 37.0002 86C37.0002 133.459 75.809 172 123.597 172C167.885 172 204.411 138.9 209.585 96.2777Z" fill="#FF4D59"/> 
<path opacity="0.3" d="M197 89.6644C197 49.526 164.682 17 124.801 17C104.345 17 85.9511 25.4775 72.7147 39.1453C72.3709 39.4914 72.0271 39.8374 71.6833 40.1834C71.3394 40.5294 70.9956 40.8754 70.6518 41.2215C70.308 41.5675 69.9642 41.9135 69.6204 42.2595C69.2766 42.6055 68.9328 42.9516 68.589 43.2976C68.2452 43.6436 67.9014 43.9896 67.5576 44.3356C67.2138 44.6817 66.87 45.0277 66.5262 45.3737C66.1824 45.7197 65.8386 46.0657 65.4948 46.4118C65.151 46.7578 64.8072 47.1038 64.4634 47.4498C64.1195 47.7958 63.7757 48.1419 63.4319 48.4879C63.0881 48.8339 62.7443 49.1799 62.4005 49.526C62.0567 49.872 61.7129 50.218 61.3691 50.564C61.0253 50.91 60.6815 51.2561 60.3377 51.6021C59.9939 51.9481 59.6501 52.2941 59.3063 52.6401C58.9625 52.9862 58.6187 53.3322 58.2749 53.6782C57.9311 54.0242 57.5873 54.3702 57.2435 54.7163C56.8997 55.0623 56.5559 55.4083 56.212 55.7543C55.8682 56.1003 55.5244 56.4464 55.1806 56.7924C54.8368 57.1384 54.493 57.4844 54.1492 57.8305C53.8054 58.1765 53.4616 58.5225 53.1178 58.8685C52.774 59.2145 52.4302 59.5606 52.0864 59.9066C51.7426 60.2526 51.3988 60.5986 51.055 60.9446C50.7112 61.2907 50.3674 61.6367 50.0236 61.9827C49.6798 62.3287 49.336 62.6747 48.9921 63.0208C48.6483 63.3668 48.3045 63.7128 47.9607 64.0588C47.6169 64.4048 47.2731 64.7509 46.9293 65.0969C46.5855 65.4429 46.2417 65.7889 45.8979 66.1349C45.5541 66.481 45.2103 66.827 44.8665 67.173C44.5227 67.519 44.1789 67.8651 43.8351 68.2111C43.4913 68.5571 43.1475 68.9031 42.8037 69.2491C42.4599 69.5952 42.1161 69.9412 41.7723 70.2872C41.4284 70.6332 41.0846 70.9792 40.7408 71.3253C40.397 71.6713 40.0532 72.0173 39.7094 72.3633C39.3656 72.7093 39.0218 73.0554 38.678 73.4014C38.3342 73.7474 37.9904 74.0934 37.6466 74.4394C37.3028 74.7855 36.959 75.1315 36.6152 75.4775C36.2714 75.8235 35.9276 76.1696 35.5838 76.5156C35.24 76.8616 34.8962 77.2076 34.5524 77.5536C34.2086 77.8997 33.8647 78.2457 33.5209 78.5917C33.1771 78.9377 32.8333 79.2837 32.4895 79.6298C32.1457 79.9758 31.8019 80.3218 31.4581 80.6678C31.1143 81.0138 30.7705 81.3599 30.4267 81.7059C30.0829 82.0519 29.7391 82.3979 29.3953 82.7439C29.0515 83.09 28.7077 83.436 28.3639 83.782C28.0201 84.128 27.6763 84.4741 27.3325 84.8201C26.9887 85.1661 26.6449 85.5121 26.301 85.8581C25.9572 86.2042 25.6134 86.5502 25.2696 86.8962C24.9258 87.2422 24.582 87.5882 24.2382 87.9343C23.8944 88.2803 23.5506 88.6263 23.2068 88.9723C22.863 89.3183 22.5192 89.6644 22.1754 90.0104C21.8316 90.3564 21.4878 90.7024 21.144 91.0484C8.07941 105.927 0 124.266 0 144.336C0 184.474 32.3176 217 72.199 217C92.6553 217 111.049 208.523 124.113 194.855C124.457 194.509 124.801 194.163 125.145 193.817C125.489 193.471 125.832 193.125 126.176 192.779C126.52 192.433 126.864 192.087 127.208 191.74C127.551 191.394 127.895 191.048 128.239 190.702C128.583 190.356 128.927 190.01 129.271 189.664C129.614 189.318 129.958 188.972 130.302 188.626C130.646 188.28 130.99 187.934 131.333 187.588C131.677 187.242 132.021 186.896 132.365 186.55C132.709 186.204 133.052 185.858 133.396 185.512C133.74 185.166 134.084 184.82 134.428 184.474C134.771 184.128 135.115 183.782 135.459 183.436C135.803 183.09 136.147 182.744 136.49 182.398C136.834 182.052 137.178 181.706 137.522 181.36C137.866 181.014 138.209 180.668 138.553 180.322C138.897 179.976 139.241 179.63 139.585 179.284C139.928 178.938 140.272 178.592 140.616 178.246C140.96 177.9 141.304 177.554 141.647 177.208C141.991 176.862 142.335 176.516 142.679 176.17C143.023 175.824 143.367 175.478 143.71 175.132C144.054 174.785 144.398 174.439 144.742 174.093C145.086 173.747 145.429 173.401 145.773 173.055C146.117 172.709 146.461 172.363 146.805 172.017C147.148 171.671 147.492 171.325 147.836 170.979C148.18 170.633 148.524 170.287 148.867 169.941C149.211 169.595 149.555 169.249 149.899 168.903C150.243 168.557 150.586 168.211 150.93 167.865C151.274 167.519 151.618 167.173 151.962 166.827C152.305 166.481 152.649 166.135 152.993 165.789C153.337 165.443 153.681 165.097 154.024 164.751C154.368 164.405 154.712 164.059 155.056 163.713C155.4 163.367 155.743 163.021 156.087 162.675C156.431 162.329 156.775 161.983 157.119 161.637C157.462 161.291 157.806 160.945 158.15 160.599C158.494 160.253 158.838 159.907 159.182 159.561C159.525 159.215 159.869 158.869 160.213 158.523C160.557 158.176 160.901 157.83 161.244 157.484C161.588 157.138 161.932 156.792 162.276 156.446C162.62 156.1 162.963 155.754 163.307 155.408C163.651 155.062 163.995 154.716 164.339 154.37C164.682 154.024 165.026 153.678 165.37 153.332C165.714 152.986 166.058 152.64 166.401 152.294C166.745 151.948 167.089 151.602 167.433 151.256C167.777 150.91 168.12 150.564 168.464 150.218C168.808 149.872 169.152 149.526 169.496 149.18C169.839 148.834 170.183 148.488 170.527 148.142C170.871 147.796 171.215 147.45 171.558 147.104C171.902 146.758 172.246 146.412 172.59 146.066C172.934 145.72 173.277 145.374 173.621 145.028C173.965 144.682 174.309 144.336 174.653 143.99C174.997 143.644 175.34 143.298 175.684 142.952C188.749 128.073 197 109.907 197 89.6644Z" fill="url(#paint0_linear)"/> 
<path d="M125 155C163.108 155 194 124.108 194 86C194 47.8924 163.108 17 125 17C86.8924 17 56 47.8924 56 86C56 124.108 86.8924 155 125 155Z" fill="url(#paint1_linear)"/> 
<path d="M125 150.528C160.638 150.528 189.528 121.638 189.528 86C189.528 50.3622 160.638 21.4722 125 21.4722C89.3622 21.4722 60.4722 50.3622 60.4722 86C60.4722 121.638 89.3622 150.528 125 150.528Z" fill="url(#paint2_linear)"/> 
<path d="M125 143.82C156.933 143.82 182.82 117.933 182.82 86.0001C182.82 54.0673 156.933 28.1807 125 28.1807C93.0673 28.1807 67.1807 54.0673 67.1807 86.0001C67.1807 117.933 93.0673 143.82 125 143.82Z" fill="url(#paint3_linear)"/> 
<g class= "g1"> 
<path class="paths" d="M35.7042 96C35.0939 96 34.7887 95.3943 34.7887 95.0915V90.8517C34.7887 89.6404 35.3991 88.429 36.6197 88.1262H36.9249V69.653C36.9249 69.0473 37.5352 68.7445 37.8404 68.7445C38.4507 68.7445 38.7559 69.3502 38.7559 69.653V75.1041H45.4695V64.5047H19.2254V75.1041H25.939V69.653C25.939 69.0473 26.5493 68.7445 26.8545 68.7445C27.4648 68.7445 27.77 69.3502 27.77 69.653V87.8233H28.0751C29.6009 88.429 30.5164 89.6404 30.5164 90.8517V95.0915C30.5164 95.6972 29.9061 96 29.6009 96H16.1737C15.5634 96 15.2582 95.3943 15.2582 95.0915V90.8517C15.2582 89.6404 15.8685 88.429 17.0892 88.1262H17.3944V64.5047H17.0892C15.8685 63.5962 15.2582 62.3849 15.2582 61.1735V55.1167C15.2582 54.511 15.8685 54.2082 16.1737 54.2082C16.784 54.2082 17.0892 54.8139 17.0892 55.1167V61.1735C17.0892 61.7792 17.6995 62.082 18.0047 62.082H46.385C46.9953 62.082 47.3005 61.4763 47.3005 61.1735V33.3123C47.3005 32.7066 46.6901 32.4038 46.385 32.4038H18.3099C17.6995 32.4038 17.3944 33.0095 17.3944 33.3123V49.0599C17.3944 49.6656 16.784 49.9685 16.4789 49.9685C15.8685 49.9685 15.5634 49.3628 15.5634 49.0599V36.3407H10.9859V63.2934C10.9859 63.5962 10.6808 63.8991 10.3756 64.2019L9.76526 64.5047L10.0704 65.1104C10.6808 66.0189 10.9859 66.9274 10.9859 67.836V70.2587C10.9859 70.8644 10.3756 71.1672 10.0704 71.1672C9.46009 71.1672 9.15493 70.5615 9.15493 70.2587V67.836C9.15493 66.0189 7.62911 64.5047 5.79812 64.5047C3.96714 64.5047 2.44131 66.0189 2.44131 67.836V70.2587C2.44131 70.8644 1.83099 71.1672 1.52582 71.1672C1.22066 71.1672 0 70.5615 0 69.9558V67.5331C0 66.6246 0.305164 65.7161 0.915493 64.8076L1.22066 64.2019L0.610329 63.8991C0.305164 64.2019 0 63.5962 0 63.2934V39.3691C0 35.4322 3.35681 32.1009 7.32394 32.1009H10.0704C10.6808 32.1009 10.9859 32.7066 10.9859 33.0095V33.918H15.2582V33.3123C15.2582 31.4953 16.784 30.2839 18.3099 30.2839H46.6901C48.5211 30.2839 49.7418 31.7981 49.7418 33.3123V34.2208H54.0141V33.3123C54.0141 32.7066 54.6244 32.4038 54.9296 32.4038H57.6761C61.6432 32.4038 65 35.735 65 39.6719V63.5962C65 63.8991 64.6948 64.2019 64.3897 64.5047L63.7793 64.8076L64.0845 65.4132C64.6948 66.3218 65 67.2303 65 68.1388V70.5615C65 71.1672 64.3897 71.47 64.0845 71.47C63.4742 71.47 63.169 70.8643 63.169 70.5615V68.1388C63.169 66.3218 61.6432 64.8076 59.8122 64.8076C57.9812 64.8076 56.4554 66.3218 56.4554 68.1388V70.5615C56.4554 71.1672 55.8451 71.47 55.5399 71.47C55.2347 71.47 54.6244 70.8643 54.6244 70.5615V68.1388C54.6244 67.2303 54.9296 66.3218 55.5399 65.4132L55.8451 64.8076L55.2347 64.5047C54.9296 64.2019 54.6244 63.8991 54.6244 63.5962V36.3407H50.3521V61.1735C50.3521 62.3849 49.7418 63.5962 48.5211 63.8991H48.216V87.8233H48.5211C49.7418 88.429 50.3521 89.3375 50.3521 90.5489V94.7886C50.3521 95.3943 49.7418 95.6972 49.4366 95.6972H35.7042V96ZM37.5352 89.6404C36.9249 89.6404 36.6197 90.2461 36.6197 90.5489V93.5773H47.6056V90.5489C47.6056 89.9432 46.9953 89.6404 46.6901 89.6404H37.5352ZM18.3099 89.6404C17.6995 89.6404 17.3944 90.2461 17.3944 90.5489V93.5773H28.3803V90.5489C28.3803 89.9432 27.77 89.6404 27.4648 89.6404H18.3099ZM38.7559 87.8233H45.4695V77.224H38.7559V87.8233ZM19.2254 87.8233H25.939V77.224H19.2254V87.8233ZM55.8451 62.3849H62.5587V39.3691C62.5587 36.6435 60.1174 34.2208 57.3709 34.2208H55.8451V62.3849ZM7.32394 34.2208C4.57747 34.2208 2.13615 36.6435 2.13615 39.3691V62.3849H8.84977V34.2208H7.32394ZM22.5822 26.0442C20.7512 26.0442 19.5305 24.53 19.5305 23.0158V22.4101L18.9202 22.1073C15.5634 21.5016 13.1221 18.4732 13.1221 15.142V0.908517C13.1221 0.605678 13.4272 0 14.0376 0C14.6479 0 15.2582 0.605678 15.2582 0.908517V9.69085L16.1737 9.08517C17.0892 8.4795 18.0047 7.87382 19.2254 7.87382H19.5305V7.57098C19.5305 5.75394 21.0563 4.23975 22.5822 4.23975H42.4178C44.2488 4.23975 45.4695 5.75394 45.4695 7.26814V7.57098L45.7747 7.87382C46.6901 8.17666 47.9108 8.4795 48.8263 9.08517L49.7418 9.69085V0.908517C49.7418 0.302839 50.3521 0 50.6573 0C51.2676 0 51.8779 0.605678 51.8779 0.908517V15.142C51.8779 18.4732 49.4366 21.5016 46.0798 22.1073H45.7747V22.4101C45.7747 24.2271 44.2488 25.7413 42.723 25.7413H22.5822V26.0442ZM22.5822 6.05678C21.9718 6.05678 21.3615 6.66246 21.3615 7.26814V23.0158C21.3615 23.6215 21.9718 23.9243 22.277 23.9243H42.1127C42.723 23.9243 43.0282 23.3186 43.0282 23.0158V7.26814C43.0282 6.66246 42.4178 6.35962 42.1127 6.35962H22.5822V6.05678ZM18.615 10.2965C16.4789 10.9022 15.2582 13.0221 15.2582 15.142C15.2582 17.2618 16.784 19.3817 18.615 19.9874L19.2254 20.2902V9.99369L18.615 10.2965ZM45.4695 20.2902L46.0798 19.9874C48.216 19.3817 49.4366 17.2618 49.4366 15.142C49.4366 13.0221 47.9108 10.9022 46.0798 10.2965L45.4695 9.99369V20.2902Z" fill="#A7AAB7"/> 
</g> 
 
<defs> 
<linearGradient id="paint0_linear" x1="27.1728" y1="188.783" x2="160.29" y2="56.5178" gradientUnits="userSpaceOnUse"> 
<stop offset="0.12661" stop-opacity="0.02"/> 
<stop offset="0.479913" stop-opacity="0.3"/> 
<stop offset="0.9" stop-opacity="0.5"/> 
</linearGradient> 
<linearGradient id="paint1_linear" x1="27.8314" y1="187.736" x2="153.273" y2="56.4691" gradientUnits="userSpaceOnUse"> 
<stop stop-color="#DBD8CF"/> 
<stop offset="0.0937052" stop-color="#E1DED7"/> 
<stop offset="0.3964" stop-color="#F0EFEB"/> 
<stop offset="0.6991" stop-color="#F9F9F7"/> 
<stop offset="1" stop-color="#FCFCFB"/> 
</linearGradient> 
<linearGradient id="paint2_linear" x1="34.1127" y1="-9.01976" x2="151.447" y2="113.648" gradientUnits="userSpaceOnUse"> 
<stop stop-color="#DBD8CF"/> 
<stop offset="0.0937052" stop-color="#E1DED7"/> 
<stop offset="0.3964" stop-color="#F0EFEB"/> 
<stop offset="0.6991" stop-color="#F9F9F7"/> 
<stop offset="1" stop-color="#FCFCFB"/> 
</linearGradient> 
<linearGradient id="paint3_linear" x1="188.475" y1="171.24" x2="98.1623" y2="49.947" gradientUnits="userSpaceOnUse"> 
<stop stop-color="#DBD8CF"/> 
<stop offset="0.1324" stop-color="#E4E2DB"/> 
<stop offset="0.4221" stop-color="#F3F2EF"/> 
<stop offset="0.7119" stop-color="#FCFCFB"/> 
<stop offset="1" stop-color="white"/> 
</linearGradient> 
<clipPath id="clip0"> 
<rect width="68" height="56" fill="white" transform="translate(90 61)"/> 
</clipPath> 
</defs> 
<style type="text/css"> 
.g1 {transform:translate(91px, 38px); 
    transform-origin: 124px 87px; 
    } 
.paths { animation: anim  linear forwards 3s; 
animation-iteration-count: infinite; 
transform: translateY(100%) 
			z-index: 999; 
} 
@keyframes anim { 
	from { 
		transform: translateY(0%);} 
 
	25%{ 
	transform: translateY(3%);} 
		 
	50% { 
		transform: translateY(0%);} 
		75% { 
			transform: translateY(-3%);} 
		 
	to { 
		transform: translateY(0%); 
	} 
	} 
 </style> 
</svg>

Answer 1

Jquery

$(window).on('load', function() {
    $('#obj3').contents().find('.g1').css({ 'transform': 'rotate(140deg)' });
});
READ ALSO
функции в чистом JavaScript не видят глобальные переменные

функции в чистом JavaScript не видят глобальные переменные

На курсах задали сделать анимациюУ меня есть по классике три файлика html, сss и js

138
Про innerHTML в javaScript [дубликат]

Про innerHTML в javaScript [дубликат]

У меня этот скрипт работает:

184
Вывести объекты на страницу [закрыт]

Вывести объекты на страницу [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение

108