�m���ē�����AWeb�u���E�U��ŗ��p�ł���O���t�B�b�N�֘A�Z�p�BHTML�̂悤�Ȋ��o�Ő}�`���`��ł���uSVG�v���n�b�N���悤
�@�{�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����グ���Ȃ������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
�@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
�@����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
�@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
�@�ŏ��͐Ԃ��~���\������Ă��܂����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
�@���̂悤�ɁAtransform�����ɍ��W�ϊ������w�肷�邱�Ƃŕό`���K�p����܂��B�g�p�ł�����͈ȉ��̂Ƃ���ł��B
�@�����̊��́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
�@g�^�O�ɑ�����W�ϊ��𗘗p����A�����̐}�`�^�O��g�ݍ��킹�č쐬�������G�Ȑ}�`�ɑ��Ĉ�т������W�ϊ���K�p�ł��܂��Bg�^�O���l�X�g�����ĊK�w�I�ȍ��W�ϊ��c���[���\�z�ł��܂��B
Copyright © ITmedia, Inc. All Rights Reserved.