SVG�Ő}�`��A�j����`�悵�Ă݂悤�FWeb�O���t�B�b�N���n�b�N����i3�j�i1/5 �y�[�W�j

�m���ē�����AWeb�u���E�U��ŗ��p�ł���O���t�B�b�N�֘A�Z�p�BHTML�̂悤�Ȋ��o�Ő}�`���`��ł���uSVG�v���n�b�N���悤

» 2012�N07��02�� 00��00�� ���J
[�ɓ�����CWebOS Goodies]

�O���[�v���E�����N�E�ό`

�@�{�A���ł́AWeb�u���E�U��ŗ��p�ł���O���t�B�b�N�Z�p�𕪂���₷���Љ�Ă��܂��B�O����SVG�̊�b�҂Ƃ��āASVG�h�L�������g�̊�{�I�ȏ����Ɗ�{�}�`�̕`����@�A�e��X�^�C���w��̕��@�Ȃǂ�������܂����B

�@����͂��̑����Ƃ��āA�ό`��A�j���[�V�����A�t�B���^�[�AJavaScript�ɂ�鐧��Ƃ������@�\�����グ�Ă����܂��B��ɂ���đ����̃T���v���ƂƂ��ɉ�����Ă����܂����AWeb�u���E�U�ɂ���Ă͈ꕔ�����삵�܂���B�m���ɃT���v�������������́AFirefox�܂���Opera�̍ŐV�ł����g�p���������B

���@�}�`�̃O���[�v��

�@�܂��͑O����グ���Ȃ������d�v�Ȋ�{�@�\�Ƃ��āA�u�}�`�̃O���[�v���v��������܂��BSVG�̂悤�ȃx�N�g���O���t�B�b�N�X�ł́A�����̊�{�}�`��g�ݍ��킹��1�‚̃I�u�W�F�N�g���\�����邱�Ƃ��悭����܂��B�I�u�W�F�N�g�S�̂�1�‚̃O���[�v�Ƃ��Ă܂Ƃ߂Ă����΁A���ʂ̑������ꊇ���Ďw�肵����A�S�̂��܂Ƃ߂Ĉړ�����Ƃ��������Ƃ��”\�ƂȂ�܂��B

�@SVG�ł́Ag�^�O�̓�����circle��rect�Ƃ������}�`�^�O���L�q���邱�ƂŃO���[�v�����������܂��Bg�^�O�ɂ�fill��stroke�̂悤�ȋ��ʂ̑������w��ł��A�����͓����̂��ׂĂ̐}�`�Ɉ����p����܂��i�X�Ɏw�肪����΁A�����炪�D�悳��܂��j�B�ȉ��ɗ�������܂��B

O[vƑ̈ꊇw �O���[�v���Ƒ����̈ꊇ�w���@���ۂ̃T���v��������

�@use�^�O���g�p����ƁA�O���[�v�A�������͒P�̂̐}�`�̃R�s�[��ʂ̏ꏊ�ɕ\���ł��܂��Buse�^�O��xlink:href�����ŃR�s�[���̐}�`��id���w�肵�Ax�Ay�����ŕ\���ʒu���w�肵�܂��Bg�^�O�Ɠ��l�ɋ��ʑ������w�肷��Έ����p�����̂ŁA�R�s�[���Ƃɕ\���X�^�C����ς��邱�Ƃ��”\�ł��B

�@use�^�O�ɂ��Q�Ƃ����}�`���`���邽�߂ɗp�ӂ���Ă���̂�symbol�^�O�ł��Bg�^�O�Ǝ��Ă��܂����A���ꎩ�g�͕\������Ȃ��_�ƁA�\���͈͂��w�肷��viewBox������preserveAspectRatio�������w��ł���_���قȂ�܂��i�����̑����ɂ‚��Ă͑O����Q�Ɓj�B����ɂ��Ause�^�O��width�Aheight�����ŕ\�����e�̊g��E�k�����”\�ł��B

V{̒`Ǝgp �V���{���̒�`�Ǝg�p�@���ۂ̃T���v��������

�@����1�‚�g�^�O�̈���Ƃ��āAdefs�^�O������܂��Bsymbol�^�O��O��������pattern�^�O�̂悤�ȁA�u���ۂɂ͕\�����Ȃ��A��`�̂��߂����̐}�`�v���܂Ƃ߂邽�߂̂��̂ł��Bdefs���ɒ�`�����}�`�͕\������Ȃ����߁A�e�L�X�g�𗬂����ނ��߂̃p�X���\���Ƃ������ꍇ���ȒP�ɑΏ��ł��܂��B

�@�“ǐ���A�N�Z�V�r���e�B�����コ���邽�߂ɁASVG�h�L�������g�̐擪��defs�^�O��1�‹L�q���A���ׂĂ̒�`�������ɂ܂Ƃ߂�̂���������Ă��܂��B�����������ł͂Ȃ��̂ŁA�K�v�Ȃ�Ε�����defs�^�O���܂߂���Adefs�^�O�ȊO�̏ꏊ�Ńp�X�����`���邱�Ƃ��”\�ł��B

���@�����N�̐ݒu

�@SVG�ł́A�}�`�ɑ΂���HTML�ȂǂƓ����n�C�p�[�����N��ݒ肷�邱�Ƃ��”\�ł��B�L�q���@��HTML�Ƃقړ����ł����A�����N���xlink:href�����Ŏw�肵�܂��B�ȉ��ɗ�������܂��B

�@�����N�Ɍ����Ă�rect�^�O���N���b�N����ƁA�V�����u���E�U�E�B���h�E�i�܂��͐V�K�^�u�j��@IT�̃g�b�v�y�[�W���J���܂��Ba�^�O��target������HTML�Ɠ��l�ɋ@�\���Ă���̂�������܂��B

�@�{�^���̃��x����`�悷��text�^�O�ɂ́upointer-events="none"�v�Ƃ����������w�肵�Ă��܂����A�����text�^�O�̃N���b�N�𖳎����āA�w��̃^�O�ɃC�x���g��`���邽�߂̂��̂ł��B������w�肵�Ȃ��ƁA���x���������N���b�N�ł̓����N���@�\���܂���B

�@���R�ł����A�����N��ɂ�SVG�h�L�������g���w��ł��܂��B���̍ہA�t���O�����g�����ɂ���ĕ\���͈͂̕ύX���”\�ł��B�����‚��w����@������̂ł����A�����ł�view�^�O�𗘗p������@�����グ�܂��B�ȉ��ɗ�������܂��B

URLtOgɂ\͈͂̕ύX URL�t���O�����g�ɂ��\���͈͂̕ύX�@���ۂ̃T���v��������

�@�ŏ��͐Ԃ��~���\������Ă��܂����A������N���b�N����Ɓu#r�v�̃����N�ɂ��‚���`�ɕς��܂��B��`���N���b�N����ƐԂ��~�ɖ߂�܂��B

�@�����Ń|�C���g�ɂȂ�̂́A�Ō�ɋL�q���ꂽ2�‚�view�^�O�ł��BURL�t���O�����g��view�^�O��id�ƈ�v����ƁAsvg�^�O��viewBox�Ȃǂ̎w���view�^�O�̓����̑����ŏ㏑�����܂��B���̋@�\�����p����ƁA�Ⴆ�΁u�����N���N���b�N����ƁA�Ή����镔�����g��\�������v�Ƃ����悤�ȓ��삪�ȒP�Ɏ����ł��܂��B

���@�}�`�̕ό`

�@SVG�ł́A�}�`�ɑ΂��ĕ��s�ړ����]�Ȃǂ̕ό`�i���W�ϊ��j���K�p�ł��܂��B����Ŏ��グ��CSS transform�Ƃقړ����̋@�\�ƍl����΂悢�ł��傤�i�������A3�����ό`�͂ł��܂���j�B�ȉ~�Ƌ�`�ɑ΂��ĕό`��K�p��������ȉ��Ɏ����܂��B

Wϊ̓Kp ���W�ϊ��̓K�p�@���ۂ̃T���v��������

�@���̂悤�ɁAtransform�����ɍ��W�ϊ��֐����w�肷�邱�Ƃŕό`���K�p����܂��B�g�p�ł���֐��͈ȉ��̂Ƃ���ł��B

transformŎgpłWϊ֐ transform�����Ŏg�p�ł�����W�ϊ��֐�

�@�����̊֐��́A�󔒋�؂�ŕ����w��”\�ł��B�E�ɏ��������̂��珇�ɓK�p����Ă����̂ŁA�L�q���鏇�����d�v�ɂȂ�܂��B�܂��A�}�`���̂�x�Ay�����Ȃǂ͕ϊ���̍��W�n�ł̎w��ƂȂ邱�Ƃɂ����ӂ��K�v�ł��B�Ⴆ��45�x��]����circle�^�O��cx, cy������(10, 0)���w�肷��ƁA���S���W���΂߉E��10�s�N�Z���̏ꏊ�ɂȂ�܂��B���̊֌W��������Â炢�Ƃ��́Acx�Acy������0�ɌŒ肵����ŁA�Ō�̕ϊ��Ƃ���translate�֐����L�q���A���s�ړ���������̂��悢�ł��傤�B��̃T���v���ł��������Ă��܂��B

�@transform������g�^�O��use�^�O�ɂ��w��ł��܂��B���̏ꍇ�A�����̐}�`��transform�����̉E��g�^�O����transform�������lj������`�ɂȂ�܂��B

O[vɑ΂Wϊ �O���[�v�ɑ΂�����W�ϊ��@���ۂ̃T���v��������

�@g�^�O�ɑ΂�����W�ϊ��𗘗p����΁A�����̐}�`�^�O��g�ݍ��킹�č쐬�������G�Ȑ}�`�ɑ΂��Ĉ�т������W�ϊ���K�p�ł��܂��Bg�^�O���l�X�g�����ĊK�w�I�ȍ��W�ϊ��c���[���\�z�ł��܂��B

�@�@�@�@�@�@ 1|2|3|4|5 ���̃y�[�W��

Copyright © ITmedia, Inc. All Rights Reserved.

'; this.insertTarget = document.querySelector('#cmsBody .subscription') || document.querySelector('#cmsBody .inner'); }; BodyAdIMSWithCCE.prototype = Object.create(BodyAdContent.prototype); BodyAdIMSWithCCE.prototype.activate = function () { refreshGam('InArtSpecialLink'); } // global reference window.itm = itm; //entry point BodyAdEventBase.polyfill(); const bodyAdManager = BodyAdManager.getInstance(); bodyAdManager.addEventListener(BodyAdManager.EVENTS.READY, function (ev) { bodyAdManager.loadAdvertise(); }); bodyAdManager.init(); })();
�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

Microsoft  WindowsőO2025
AI for GWjAO
[R[h^m[R[h Zg by IT - ITGWjArWlX̒SŊ􂷂gD
Cloud Native Central by IT - XP[uȔ\͂gD
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B