0
私はCSSファイルから表示したいスプライトファイルを持っていますが、座標を正しく設定する方法や表示方法はわかりません。SVGファイルからSVGアイコン座標をどのように配置するのか分かりません
トグルリンクを使用して、下のコードのような座標に基づいてアイコンを変更したいと思っていますが、スプライトファイルを添付する方法はわかりませんが、下にスプライトファイルを追加しました下記の別のスニペットに...
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="267.125px" height="74px" viewBox="0 0 267.125 74" enable-background="new 0 0 267.125 74" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M64.246,0C54.302,0,46.24,8.062,46.24,18.006c0,9.946,8.062,18.006,18.006,18.006
\t \t c9.945,0,18.006-8.06,18.006-18.006C82.252,8.062,74.191,0,64.246,0z M68.104,18.013H65.58c0,4.031,0,8.996,0,8.996h-3.739
\t \t c0,0,0-4.915,0-8.996h-1.778v-3.178h1.778v-2.057c0-1.473,0.699-3.774,3.773-3.774l2.77,0.011V12.1c0,0-1.684,0-2.01,0
\t \t c-0.327,0-0.793,0.163-0.793,0.866v1.868h2.851L68.104,18.013z" />
<path fill="#FFFFFF" d="M110.258,0c-9.944,0-18.006,8.062-18.006,18.006c0,9.946,8.062,18.006,18.006,18.006
\t \t s18.006-8.06,18.006-18.006C128.264,8.062,120.202,0,110.258,0z M117.418,14.335c0.008,0.158,0.011,0.317,0.011,0.477
\t \t c0,4.882-3.716,10.511-10.511,10.511c-2.087,0-4.028-0.611-5.663-1.659c0.29,0.033,0.584,0.051,0.881,0.051
\t \t c1.732,0,3.323-0.589,4.587-1.58c-1.616-0.031-2.981-1.099-3.45-2.565c0.225,0.042,0.456,0.066,0.694,0.066
\t \t c0.337,0,0.664-0.046,0.973-0.13c-1.688-0.341-2.963-1.833-2.963-3.622c0-0.015,0-0.031,0-0.046
\t \t c0.499,0.277,1.068,0.442,1.674,0.462c-0.991-0.662-1.643-1.794-1.643-3.075c0-0.677,0.182-1.312,0.5-1.857
\t \t c1.821,2.235,4.544,3.706,7.614,3.86c-0.063-0.27-0.096-0.552-0.096-0.842c0-2.04,1.654-3.693,3.695-3.693
\t \t c1.062,0,2.022,0.448,2.696,1.165c0.841-0.165,1.632-0.473,2.346-0.897c-0.277,0.864-0.862,1.587-1.624,2.044
\t \t c0.747-0.088,1.46-0.288,2.121-0.58C118.767,13.164,118.14,13.814,117.418,14.335z" />
<g>
<g>
<path fill="#FFFFFF" d="M157.35,16.683v-0.037c-0.007,0.013-0.017,0.026-0.025,0.037H157.35z" />
<path fill="#FFFFFF" d="M156.27,0c-9.945,0-18.006,8.062-18.006,18.006c0,9.946,8.061,18.006,18.006,18.006
\t \t \t \t c9.944,0,18.006-8.06,18.006-18.006C174.277,8.062,166.214,0,156.27,0z M151.356,26.611h-3.861v-11.61h3.861L151.356,26.611
\t \t \t \t L151.356,26.611z M149.425,13.415H149.4c-1.295,0-2.132-0.892-2.132-2.007c0-1.139,0.864-2.007,2.183-2.007
\t \t \t \t c1.321,0,2.134,0.868,2.158,2.007C151.608,12.522,150.771,13.415,149.425,13.415z M165.273,26.611h-3.86V20.4
\t \t \t \t c0-1.561-0.558-2.627-1.956-2.627c-1.065,0-1.701,0.721-1.98,1.413c-0.102,0.248-0.128,0.591-0.128,0.941v6.484h-3.859
\t \t \t \t c0,0,0.049-10.522,0-11.61h3.859v1.644c0.514-0.794,1.431-1.917,3.479-1.917c2.539,0,4.444,1.657,4.444,5.225L165.273,26.611
\t \t \t \t L165.273,26.611z" />
</g>
</g>
<g>
<g>
<ellipse fill="#FFFFFF" cx="202.3" cy="18.195" rx="3.606" ry="3.494" />
<path fill="#FFFFFF" d="M207.881,18.391c0,2.985-2.499,5.406-5.581,5.406c-3.081,0-5.581-2.421-5.581-5.406
\t \t \t \t c0-0.536,0.082-1.052,0.231-1.541h-1.648v7.584c0,0.393,0.321,0.712,0.713,0.712h12.501c0.393,0,0.713-0.319,0.713-0.712V16.85
\t \t \t \t h-1.579C207.8,17.338,207.881,17.854,207.881,18.391z" />
<path fill="#FFFFFF" d="M206.385,14.803h2.029c0.444,0,0.808-0.364,0.808-0.809V12.06c0-0.445-0.364-0.809-0.808-0.809h-2.029
\t \t \t \t c-0.445,0-0.809,0.364-0.809,0.809v1.934C205.576,14.44,205.939,14.803,206.385,14.803z" />
<path fill="#FFFFFF" d="M202.283,0.227c-9.945,0-18.006,8.062-18.006,18.006c0,9.946,8.061,18.006,18.006,18.006
\t \t \t \t c9.944,0,18.006-8.06,18.006-18.006C220.289,8.29,212.226,0.227,202.283,0.227z M211.259,24.906c0,1.267-1.037,2.303-2.304,2.303
\t \t \t \t h-13.343c-1.268,0-2.305-1.036-2.305-2.303V11.562c0-1.268,1.037-2.304,2.305-2.304h13.343c1.267,0,2.304,1.037,2.304,2.304
\t \t \t \t V24.906z" />
</g>
</g>
<path fill="#FFFFFF" d="M18.12,0C8.113,0,0,8.113,0,18.12c0,10.009,8.113,18.12,18.12,18.12s18.12-8.111,18.12-18.12
\t \t C36.24,8.113,28.127,0,18.12,0z M19.991,22.155c-1.124,0-2.181-0.606-2.543-1.296c0,0-0.605,2.398-0.732,2.86
\t \t c-0.451,1.637-1.777,3.274-1.879,3.406c-0.072,0.093-0.231,0.064-0.248-0.06c-0.029-0.208-0.367-2.272,0.031-3.955
\t \t c0.2-0.845,1.339-5.671,1.339-5.671s-0.333-0.664-0.333-1.646c0-1.544,0.895-2.694,2.008-2.694c0.947,0,1.402,0.71,1.402,1.562
\t \t c0,0.951-0.605,2.376-0.918,3.694c-0.261,1.104,0.553,2.004,1.642,2.004c1.972,0,3.3-2.533,3.3-5.534
\t \t c0-2.281-1.536-3.988-4.331-3.988c-3.156,0-5.124,2.356-5.124,4.986c0,0.907,0.268,1.546,0.687,2.039
\t \t c0.192,0.228,0.219,0.321,0.149,0.582c-0.051,0.19-0.164,0.653-0.212,0.834c-0.069,0.265-0.283,0.358-0.521,0.261
\t \t c-1.454-0.593-2.131-2.185-2.131-3.977c0-2.955,2.493-6.501,7.439-6.501c3.974,0,6.589,2.876,6.589,5.963
\t \t C25.607,19.104,23.337,22.155,19.991,22.155z" />
</g>
<g>
<path fill="#28A9E1" d="M64.246,36.38c-9.944,0-18.006,8.062-18.006,18.006c0,9.946,8.062,18.006,18.006,18.006
\t \t c9.945,0,18.006-8.06,18.006-18.006C82.252,44.442,74.191,36.38,64.246,36.38z M68.104,54.393H65.58c0,4.031,0,8.996,0,8.996
\t \t h-3.739c0,0,0-4.915,0-8.996h-1.778v-3.178h1.778v-2.057c0-1.473,0.699-3.774,3.773-3.774l2.77,0.011v3.085c0,0-1.684,0-2.01,0
\t \t c-0.327,0-0.793,0.163-0.793,0.866v1.868h2.851L68.104,54.393z" />
<path fill="#28A9E1" d="M110.258,36.38c-9.944,0-18.006,8.062-18.006,18.006c0,9.946,8.062,18.006,18.006,18.006
\t \t s18.006-8.06,18.006-18.006C128.264,44.442,120.202,36.38,110.258,36.38z M117.418,50.715c0.008,0.158,0.011,0.317,0.011,0.477
\t \t c0,4.882-3.716,10.511-10.511,10.511c-2.087,0-4.028-0.611-5.663-1.659c0.29,0.033,0.584,0.051,0.881,0.051
\t \t c1.732,0,3.323-0.589,4.587-1.58c-1.616-0.031-2.981-1.099-3.45-2.565c0.225,0.042,0.456,0.066,0.694,0.066
\t \t c0.337,0,0.664-0.046,0.973-0.13c-1.688-0.341-2.963-1.833-2.963-3.622c0-0.015,0-0.031,0-0.046
\t \t c0.499,0.277,1.068,0.442,1.674,0.462c-0.991-0.662-1.643-1.794-1.643-3.075c0-0.677,0.182-1.312,0.5-1.857
\t \t c1.821,2.235,4.544,3.706,7.614,3.86c-0.063-0.27-0.096-0.552-0.096-0.842c0-2.04,1.654-3.693,3.695-3.693
\t \t c1.062,0,2.022,0.448,2.696,1.165c0.841-0.165,1.632-0.473,2.346-0.897c-0.277,0.864-0.862,1.587-1.624,2.044
\t \t c0.747-0.088,1.46-0.288,2.121-0.58C118.767,49.544,118.14,50.194,117.418,50.715z" />
<g>
<g>
<path fill="#28A9E1" d="M157.35,53.063v-0.037c-0.007,0.013-0.017,0.026-0.025,0.037H157.35z" />
<path fill="#28A9E1" d="M156.27,36.38c-9.945,0-18.006,8.062-18.006,18.006c0,9.946,8.061,18.006,18.006,18.006
\t \t \t \t c9.944,0,18.006-8.06,18.006-18.006C174.277,44.442,166.214,36.38,156.27,36.38z M151.356,62.991h-3.861v-11.61h3.861
\t \t \t \t L151.356,62.991L151.356,62.991z M149.425,49.795H149.4c-1.295,0-2.132-0.892-2.132-2.007c0-1.139,0.864-2.007,2.183-2.007
\t \t \t \t c1.321,0,2.134,0.868,2.158,2.007C151.608,48.902,150.771,49.795,149.425,49.795z M165.273,62.991h-3.86V56.78
\t \t \t \t c0-1.561-0.558-2.627-1.956-2.627c-1.065,0-1.701,0.721-1.98,1.413c-0.102,0.248-0.128,0.591-0.128,0.941v6.484h-3.859
\t \t \t \t c0,0,0.049-10.522,0-11.61h3.859v1.644c0.514-0.794,1.431-1.917,3.479-1.917c2.539,0,4.444,1.657,4.444,5.225L165.273,62.991
\t \t \t \t L165.273,62.991z" />
</g>
</g>
<g>
<g>
<ellipse fill="#28A9E1" cx="202.3" cy="54.575" rx="3.606" ry="3.494" />
<path fill="#28A9E1" d="M207.881,54.771c0,2.985-2.499,5.406-5.581,5.406c-3.081,0-5.581-2.421-5.581-5.406
\t \t \t \t c0-0.536,0.082-1.052,0.231-1.541h-1.648v7.584c0,0.393,0.321,0.712,0.713,0.712h12.501c0.393,0,0.713-0.319,0.713-0.712V53.23
\t \t \t \t h-1.579C207.8,53.718,207.881,54.234,207.881,54.771z" />
<path fill="#28A9E1" d="M206.385,51.183h2.029c0.444,0,0.808-0.364,0.808-0.809V48.44c0-0.445-0.364-0.809-0.808-0.809h-2.029
\t \t \t \t c-0.445,0-0.809,0.364-0.809,0.809v1.934C205.576,50.82,205.939,51.183,206.385,51.183z" />
<path fill="#28A9E1" d="M202.283,36.607c-9.945,0-18.006,8.062-18.006,18.006c0,9.946,8.061,18.006,18.006,18.006
\t \t \t \t c9.944,0,18.006-8.06,18.006-18.006C220.289,44.67,212.226,36.607,202.283,36.607z M211.259,61.286
\t \t \t \t c0,1.267-1.037,2.303-2.304,2.303h-13.343c-1.268,0-2.305-1.036-2.305-2.303V47.942c0-1.268,1.037-2.304,2.305-2.304h13.343
\t \t \t \t c1.267,0,2.304,1.037,2.304,2.304V61.286z" />
</g>
</g>
<path fill="#28A9E1" d="M18.12,36.38C8.113,36.38,0,44.493,0,54.5c0,10.009,8.113,18.12,18.12,18.12s18.12-8.111,18.12-18.12
\t \t C36.24,44.493,28.127,36.38,18.12,36.38z M19.991,58.535c-1.124,0-2.181-0.606-2.543-1.296c0,0-0.605,2.398-0.732,2.86
\t \t c-0.451,1.637-1.777,3.274-1.879,3.406c-0.072,0.093-0.231,0.064-0.248-0.06c-0.029-0.208-0.367-2.272,0.031-3.955
\t \t c0.2-0.845,1.339-5.671,1.339-5.671s-0.333-0.664-0.333-1.646c0-1.544,0.895-2.694,2.008-2.694c0.947,0,1.402,0.71,1.402,1.562
\t \t c0,0.951-0.605,2.376-0.918,3.694c-0.261,1.104,0.553,2.004,1.642,2.004c1.972,0,3.3-2.533,3.3-5.534
\t \t c0-2.281-1.536-3.988-4.331-3.988c-3.156,0-5.124,2.356-5.124,4.986c0,0.907,0.268,1.546,0.687,2.039
\t \t c0.192,0.228,0.219,0.321,0.149,0.582c-0.051,0.19-0.164,0.653-0.212,0.834c-0.069,0.265-0.283,0.358-0.521,0.261
\t \t c-1.454-0.593-2.131-2.185-2.131-3.977c0-2.955,2.493-6.501,7.439-6.501c3.974,0,6.589,2.876,6.589,5.963
\t \t C25.607,55.484,23.337,58.535,19.991,58.535z" />
</g>
<g>
<path fill="#FFFFFF" d="M248.119,1.293c9.252,0,16.812,7.461,16.812,16.713s-7.561,16.812-16.812,16.812
\t \t c-9.252,0-16.713-7.561-16.713-16.812S238.868,1.293,248.119,1.293 M248.119,0c-9.948,0-18.006,8.058-18.006,18.006
\t \t s8.058,18.006,18.006,18.006c9.948,0,18.006-8.058,18.006-18.006S258.067,0,248.119,0L248.119,0z" />
<g>
<polygon fill="#FFFFFF" points="236.381,14.624 236.381,20.99 240.559,16.315 \t \t " />
<path fill="#FFFFFF" d="M255.381,16.613v-1.99l-4.178,1.592l1.293,1.393C253.292,17.111,254.287,16.713,255.381,16.613z" />
<path fill="#FFFFFF" d="M251.402,18.503l-1.592-1.691l-4.079,1.592l-3.88-1.592l-5.471,6.168v0.398h13.33c0-0.199,0-0.398,0-0.497
\t \t \t C249.612,21.189,250.308,19.598,251.402,18.503z" />
<polygon fill="#FFFFFF" points="244.936,16.713 245.732,16.912 246.627,16.713 250.208,15.32 255.381,13.33 255.381,11.54
\t \t \t 236.381,11.54 236.381,13.231 241.454,15.32 \t \t " />
<path fill="#FFFFFF" d="M260.952,21.587c-0.099-0.298-0.199-0.597-0.298-0.895c-0.696-1.492-2.189-2.487-3.979-2.686
\t \t \t c-0.199,0-0.398-0.099-0.597-0.099l0,0c-0.199,0-0.398,0-0.597,0.099c-0.796,0.099-1.492,0.298-2.089,0.696
\t \t \t c-0.199,0.099-0.398,0.199-0.497,0.398c-0.199,0.099-0.298,0.298-0.497,0.398c-0.199,0.199-0.398,0.398-0.597,0.696
\t \t \t c-0.597,0.696-0.895,1.691-0.895,2.686c0,0.199,0,0.398,0.099,0.497c0,0.199,0.099,0.398,0.099,0.696
\t \t \t c0.099,0.199,0.099,0.398,0.199,0.597c0.298,0.597,0.597,1.194,1.094,1.691c0.895,0.895,2.189,1.492,3.581,1.492
\t \t \t c1.393,0,2.686-0.597,3.581-1.492l0.099-0.099c0.298-0.298,0.497-0.597,0.696-0.895c0.298-0.497,0.497-0.895,0.597-1.492
\t \t \t c0.099-0.298,0.099-0.696,0.099-0.995C261.151,22.383,261.052,21.985,260.952,21.587z M259.062,23.577h-2.189v2.288l0,0h-1.393
\t \t \t v-1.194v-0.597v-0.497h-2.189v-0.199v-1.293h1.492h0.696v-0.199v-0.995l0,0v-0.995h0.597h0.597h0.199l0,0v2.089h2.189
\t \t \t C259.062,21.985,259.062,23.577,259.062,23.577z" />
</g>
</g>
<g>
<path fill="#28A9E1" d="M248.119,38.281c9.252,0,16.812,7.461,16.812,16.713s-7.561,16.812-16.812,16.812
\t \t c-9.252,0-16.713-7.561-16.713-16.812S238.868,38.281,248.119,38.281 M248.119,36.988c-9.948,0-18.006,8.058-18.006,18.006
\t \t S238.171,73,248.119,73c9.948,0,18.006-8.058,18.006-18.006S258.067,36.988,248.119,36.988L248.119,36.988z" />
<g>
<polygon fill="#28A9E1" points="236.381,51.612 236.381,57.978 240.559,53.303 \t \t " />
<path fill="#28A9E1" d="M255.381,53.601v-1.99l-4.178,1.592l1.293,1.393C253.292,54.099,254.287,53.701,255.381,53.601z" />
<path fill="#28A9E1" d="M251.402,55.491l-1.592-1.691l-4.079,1.592l-3.88-1.592l-5.471,6.168v0.398h13.33c0-0.199,0-0.398,0-0.497
\t \t \t C249.612,58.177,250.308,56.586,251.402,55.491z" />
<polygon fill="#28A9E1" points="244.936,53.701 245.732,53.9 246.627,53.701 250.208,52.308 255.381,50.318 255.381,48.528
\t \t \t 236.381,48.528 236.381,50.219 241.454,52.308 \t \t " />
<path fill="#28A9E1" d="M260.952,58.575c-0.099-0.298-0.199-0.597-0.298-0.895c-0.696-1.492-2.189-2.487-3.979-2.686
\t \t \t c-0.199,0-0.398-0.099-0.597-0.099l0,0c-0.199,0-0.398,0-0.597,0.099c-0.796,0.099-1.492,0.298-2.089,0.696
\t \t \t c-0.199,0.099-0.398,0.199-0.497,0.398c-0.199,0.099-0.298,0.298-0.497,0.398c-0.199,0.199-0.398,0.398-0.597,0.696
\t \t \t c-0.597,0.696-0.895,1.691-0.895,2.686c0,0.199,0,0.398,0.099,0.497c0,0.199,0.099,0.398,0.099,0.696
\t \t \t c0.099,0.199,0.099,0.398,0.199,0.597c0.298,0.597,0.597,1.194,1.094,1.691c0.895,0.895,2.189,1.492,3.581,1.492
\t \t \t c1.393,0,2.686-0.597,3.581-1.492l0.099-0.099c0.298-0.298,0.497-0.597,0.696-0.895c0.298-0.497,0.497-0.895,0.597-1.492
\t \t \t c0.099-0.298,0.099-0.696,0.099-0.995C261.151,59.371,261.052,58.973,260.952,58.575z M259.062,60.565h-2.189v2.288l0,0h-1.393
\t \t \t v-1.194v-0.597v-0.497h-2.189v-0.199v-1.293h1.492h0.696v-0.199v-0.995l0,0v-0.995h0.597h0.597h0.199l0,0v2.089h2.189
\t \t \t C259.062,58.973,259.062,60.565,259.062,60.565z" />
</g>
</g>
</svg>$(function() {
$('verify').click(function() {
var id = $(this).parents('div').attr('id');
$(this).toggleClass('verified');
$.post('/yourUpdateUrl', {
'verified': $(this).hasClass('verified'),
'id': ID_01
},
function(data) {
//some sort of update function here
});
});
});
});fieldset {
border: 0;
}
legend {
font-size: 40px;
}
label {
font-size: 24px;
font-weight: normal;
}
.verify {
text-indent: -5000px;
display: block;
top: 0;
background-image: url('social.svg');
background-position: 0, 0;
height: 50px;
width: 50px;
}
.verify.verified {
background-position: 20, 0;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container">
<form class="form-horizontal">
<div class="col-xs-6">
<fieldset>
<legend>Portfolio A</legend>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label A1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label A2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</fieldset>
<div id="ID_01">
<p><a href="" class="verify">verify</a>
</p>
</div>
</div>
<div class="col-xs-6">
<fieldset>
<legend>Portfolio B</legend>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label B1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label B2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</fieldset>
</div>
</form>
</div>
は、私はそれを固定しますが、SVGの背景画像は、背景位置をトグルしていない、私は知らない、なぜその..... – Krys
を働いていません@ Krystyna：私の答えを更新しました。今のところ私のために働いています –
私の背景のアイコンの位置は変わっていません.... – Krys