1. 首頁
  2. 問答
  3. 的樣式嵌入

的樣式嵌入

2015-06-15 106 views
0 
<object> 
    #document 
    <svg></svg> 
</object>

我想風格的SVG的寬度對象的SVG是父母的100％，但由於它在技術上在不同的文檔，我有麻煩完成這一點。如何使用任何必要的方法將寬度：100％添加到svg元素？的樣式嵌入

來源

2015-06-15 Clinton Jooooones

+1

你所說的 「父」 是什麼意思？你的意思是''？ –

+0

你只是試圖添加一個SVG到一個頁面，它的寬度是100％的父元素？ –

+0

作爲'object'的孩子'svg'的作品[[MDN參考]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object）];另外，這很有用：[SVG上的CSS技巧]（https://css-tricks.com/using-svg/） - 請參閱關於使用對象獲取svgs的部分 –

回答

1

設置對象的寬度爲100%，然後編輯SVG使其寬度爲100%。您可以在xml中看到svg，我們有一個height和width聲明，這些聲明對您的目的有效。

在這裏，我們將對象設置爲100%容器的寬度以說明效果。

.falsy-body { 
 
    width: 80%; 
 
    background-color: lightgray; 
 
} 
 
.falsy-body object { 
 
    width: 100%; 
 
}
<div class="falsy-body"> 
 
    <object> 
 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Livello_1" x="0px" y="0px" width="100%" height="100%" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve"> 
 
<g> 
 
\t <path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/> 
 
\t <path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856 c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/> 
 
\t <path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182 c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/> 
 
\t <path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258 c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/> 
 
\t <path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333 c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/> 
 
\t <path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257 C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076 C318.275,104.286,316.275,104.257,314.268,104.257z"/> 
 
\t 
 
\t \t <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)"> 
 
\t \t <stop offset="0.1" style="stop-color:#E62725"/> 
 
\t \t <stop offset="0.3093" style="stop-color:#ED1C24"/> 
 
\t \t <stop offset="1" style="stop-color:#1C1B1C"/> 
 
\t </linearGradient> 
 
\t <path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197 c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0 c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756 c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999 c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098 c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/> 
 
\t <path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794 c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523 c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013 c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41 c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359 c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/> 
 
\t <g> 
 
\t \t 
 
\t \t \t <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)"> 
 
\t \t \t <stop offset="0" style="stop-color:#0090C7"/> 
 
\t \t \t <stop offset="0.8326" style="stop-color:#2E3192"/> 
 
\t \t </linearGradient> 
 
\t \t <path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041 c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/> 
 
\t \t 
 
\t \t \t <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)"> 
 
\t \t \t <stop offset="0" style="stop-color:#0090C7"/> 
 
\t \t \t <stop offset="0.8326" style="stop-color:#2E3192"/> 
 
\t \t </linearGradient> 
 
\t \t <path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825 c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999 c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756 c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285 c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01 C172.146,368.001,208.125,346.119,249.646,334.825z"/> 
 
\t </g> 
 
\t 
 
\t \t <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)"> 
 
\t \t <stop offset="0.6047" style="stop-color:#006838"/> 
 
\t \t <stop offset="1" style="stop-color:#538B2E"/> 
 
\t </linearGradient> 
 
\t <path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756 c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267 c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485 c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933 c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765 c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141 C481.337,683.61,606.767,554.849,606.767,396.756z"/> 
 
\t 
 
\t \t <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)"> 
 
\t \t <stop offset="0" style="stop-color:#FFFFFF"/> 
 
\t \t <stop offset="1" style="stop-color:#000000"/> 
 
\t </linearGradient> 
 
\t <path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513 c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772 c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803 C384.745,370.298,382.664,352.115,378.772,334.793z"/> 
 
</g> 
 
</svg> 
 
    </object> 
 
</div>

來源

2015-06-15 15:06:29

相關問題

 相關問題