2012-10-17 15 views
5

हाय मैं इस साइट पर नया हूँ तो मुझे माफ कर दीजिए अगर मैं क्या मैंsvg क्लिप छवि और शो स्ट्रोक

मेरे प्रश्न करने के लिए कोशिश कर रहा हूँ के बारे में स्पष्ट नहीं कर रहा हूँ है: -

मैं उपयोग कर रहा हूँ एचटीएमएल 5 और एसवीजी ताकि केवल छवि कतरन/बहुभुज आकृति के अंदर है कि का हिस्सा प्रदर्शित किया जाता है छवि क्लिप, जबकि बहुभुज आकार के बाहर किसी भी भाग अदृश्य है/काटा

इसके अलावा, मैं करने के लिए स्ट्रोक की चौड़ाई और रंग जोड़ना चाहते हैं बहुभुज आकार

एसवीजी कोड है कि मैं उपयोग कर रहा हूँ: -

<?xml version="1.0" encoding="utf-8"?> 
<!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="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve"> 
<g> 
    <g> 
     <clipPath ID="SVGID_1_"> 
      <path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64 
       c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569 
       c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151 
       S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836 
       c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035 
       c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511 
       c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/> 
     </clipPath> 
    </g> 
</g> 
<a xlink:href="#"> 
    <image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5;" xlink:href="img.jpg" /> 
</a> 
</svg> 

ऊपर उल्लेख कोड ठीक काम करता है, इसे प्रदर्शित एक छवि एक बहुभुज आकार, केवल छवि हिस्सा आकृति के अंदर गिरने है कि किसी भी भाग जबकि प्रदर्शित किया जाता है है आकार के बाहर गिरना

लेकिन किसी भी तरह मैंने विभिन्न चीजों की कोशिश की लेकिन फिर भी मैं स्ट्रोक/सीमा प्रदर्शित करने में सक्षम नहीं हूं।

मेरा प्रश्न एक बहुभुज आकार कि

+0

ऊपर उल्लेख कोड क्लिप या एक बहुभुज आकृति के अंदर एक छवि प्रदर्शित करेगा, मुझे क्या करना कोशिश कर रहा हूँ इस बहुभुज आकार – Aditya

उत्तर

4

सबसे पहले, कृपया आदेश बनाने के लिए छोटे अक्षरों में आईडी लिखना अग्रिम में एक छवि क्लिप को

धन्यवाद प्रयोग किया जाता है पर सीमा/स्ट्रोक प्रदर्शित करने के लिए कैसे है क्लिप पथ का काम: <clipPath id="SVGID_1_">

दूसरा, उपयोग करने के लिए अपने पथ को डुप्लिकेट करें नियमित आकार के रूप में है।

<?xml version="1.0" encoding="utf-8"?> 
<!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="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve"> 
<g> 
    <g> 
     <clipPath id="SVGID_1_"> 
      <path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64 
       c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569 
       c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151 
       S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836 
       c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035 
       c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511 
       c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/> 
     </clipPath> 
     <path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64 
      c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569 
      c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151 
      S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836 
      c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035 
      c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511 
      c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/> 
    </g> 
</g> 
<a xlink:href="#"> 
    <image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" /> 
</a> 
</svg> 

वैकल्पिक रूप से, आप आप पथ एक आकार के रूप में परिभाषित कर सकते हैं और सिर्फ बाद में इसके नाम का संदर्भ लें: बाहर this doc

<?xml version="1.0" encoding="utf-8"?> 
<!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="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve"> 
<defs> 
    <path id="myPath" fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64 
     c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569 
     c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151 
     S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836 
     c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035 
     c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511 
     c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/> 
</defs> 
<g> 
    <g> 
     <clipPath id="SVGID_1_"> 
      <use xlink:href="#myPath" x="0" y="0"/> 
     </clipPath> 
     <use xlink:href="#myPath" x="0" y="0"/> 
    </g> 
</g> 
<a xlink:href="#"> 
    <image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" /> 
</a> 
</svg> 

चेक।

+0

धन्यवाद करने के लिए एक सीमा जोड़ने है !!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! – Aditya

+0

यह पूरी तरह से काम करता है, मैं svg के लिए नया हूं, बस 2 दिन पहले इसके बारे में पता चला, क्या आप किसी साइट या पुस्तक की सिफारिश कर सकते हैं जो मुझे बुनियादी से अग्रिम तक सिखा सकता है, फिर बहुत धन्यवाद, मुझे लगभग आश्वस्त था कि मैं ऐसा करने में कभी भी सक्षम न हो, मेरा नियोक्ता किसी ऐसे व्यक्ति की तलाश में है जो फ्लैश का उपयोग किए बिना 3 डी प्रारूप में छवि प्रस्तुत कर सकता है, यदि आप रुचि रखते हैं तो मैं एक विशेषज्ञ की तरह लग रहा हूं :) – Aditya

+0

मेरी खुशी! नहीं, मेरे ट्यूटोरियल "प्रश्न + Google" हैं। मैं मौजूदा फाइलें लेना और उन्हें बदलकर सीखना पसंद करता हूं। शायद सिर्फ "svg ट्यूटोरियल" के लिए खोजें – Nippey

0

यहां आप एसवीजी के भीतर से एक छवि का उपयोग कर रहे हैं, लेकिन अगर आपको लगता है कि आप अपने एचटीएमएल कोड में छवि पर क्लिप पथ का उपयोग कर रहे हैं, तो आप इसे इस तरह से सीमा नहीं दे पाएंगे। यह प्राप्त करने के लिए कि आप क्लिप के पथ को छवि के कंटेनर div पर भी लागू कर सकते हैं और फिर उसे एक ही रंग की पृष्ठभूमि और सीमा दें।

संबंधित मुद्दे